import * as echarts from "echarts";
import { isTotal } from "@/utils/index.js";
export const overview = {
  SectionA: [
    {
      value: "7.4",
      utils: "万m²",
      name: "占地面积",
    },
    {
      value: "30.4",
      utils: "万m²",
      name: "建筑面积",
    },
    {
      value: "7",
      utils: "栋",
      name: "建筑数量",
    },
    {
      value: "21",
      utils: "亿",
      name: "总投资",
    },
  ],
  describe:
    "广州归谷科技园坐落于广深科创走廊十个核心创新平台之—广州科学城，建筑面积达30万平方米，从美国硅谷到广州归谷， 旨在构建集总部办公、科技孵化加速、生活配套于一体的科技生态服务平台。园区建设有5栋办公孵化楼和2栋科学家公寓，依山而建保留原生山体公园、突破性改造周边滨水景致，构建依山傍水的绿色生态环境。",
  SectionB: [
    {
      value: "天气",
      name: "晴",
    },
    {
      value: "温度",
      name: "26.5",
    },
    {
      value: "湿度",
      name: "85.0",
    },
    {
      value: "PM2.5",
      name: "6.2",
    },
    {
      value: "风速",
      name: "0.0",
    },
    {
      value: "气压",
      name: "99560.0",
    },
    {
      value: "风向",
      name: "西风",
    },
    {
      value: "PM10",
      name: "15.2",
    },
  ],
  SectionC: [
    {
      label: "生物医药",
      value: "1",
    },
    {
      label: "金融业",
      value: "1",
    },
    {
      label: "先进制造业",
      value: "1",
    },
    {
      label: "人工智能",
      value: "1",
    },
    {
      label: "服务业",
      value: "1",
    },
    {
      label: "信息传输",
      value: "1",
    },
    {
      label: "能源业",
      value: "1",
    },
  ],
  SectionD: [
    {
      label: "监控设备",
      value: "1",
    },
    {
      label: "停车设备",
      value: "1",
    },
    {
      label: "能耗抄表设备",
      value: "1",
    },
    {
      label: "巡更设备",
      value: "1",
    },
    {
      label: "动环检测设备",
      value: "1",
    },
    {
      label: "网络设备",
      value: "1",
    },
    {
      label: "信息发布设备",
      value: "1",
    },
    {
      label: "发电机设备",
      value: "1",
    },
  ],
  SectionE: [
    {
      label: "监控设备",
      value: "10",
    },
    {
      label: "停车设备",
      value: "1",
    },
    {
      label: "能耗抄表设备",
      value: "5",
    },
    {
      label: "巡更设备",
      value: "21",
    },
    {
      label: "动环检测设备",
      value: "1",
    },
    {
      label: "网络设备",
      value: "1",
    },
    {
      label: "信息发布设备",
      value: "1",
    },
    {
      label: "发电机设备",
      value: "1",
    },
  ],
};
export const MerchantsData = {
  SectionA: [
    {
      label: "储备项目",
      value: "25",
    },
    {
      label: "在谈项目",
      value: "15",
    },
    {
      label: "签约项目",
      value: "25",
    },
    {
      label: "关闭项目",
      value: "2",
    },
  ],
  SectionB: [
    {
      label: "自主开发",
      value: "7",
    },
    {
      label: "企业介绍",
      value: "15",
    },
    {
      label: "主动上门",
      value: "12",
    },
    {
      label: "招商会",
      value: "11",
    },
    {
      label: "其他",
      value: "18",
    },
  ],
  SectionC: [
    { label: "人工智能", value: "7", value1: "6" },
    { label: "文化、体育和娱乐业", value: "7", value1: "4" },
    { label: "电力、热力、燃气及水生产和供应业", value: "4", value1: "6" },
    { label: "信息技术、人工智能", value: "3", value1: "6" },
    { label: "金融投资", value: "5", value1: "9" },
    { label: "其他", value: "2", value1: "8" },
  ],
  SectionD: {
    arr: [
      "2024-1",
      "2024-2",
      "2024-3",
      "2024-4",
      "2024-5",
      "2024-6",
      "2024-7",
      "2024-8",
      "2024-9",
      "2024-10",
      "2024-11",
      "2024-12",
    ],
    arr1: [5, 6, 15, 23, 15, 16, 6, 16, 6, 23, 20, 20],
  },
  SectionE: [
    {
      label: "100以下",
      value: "7",
    },
    {
      label: "100-300",
      value: "15",
    },
    {
      label: "300-500",
      value: "12",
    },
    {
      label: "500-1000",
      value: "15",
    },
    {
      label: "1000-2000",
      value: "18",
    },
    {
      label: "2000以上",
      value: "18",
    },
  ],
  SectionF: {
    arr: ["C1", "C2", "C3", "C4", "C5", "A1", "A2"],
    arr1: [129, 89, 40, 73, 32, 89, 19],
    arr2: [34, 65, 88, 33, 22, 21, 88],
  },
  SectionG: [
    {
      label: "100以下",
      value: "25",
    },
    {
      label: "100-300",
      value: "15",
    },
    {
      label: "300-500",
      value: "25",
    },
    {
      label: "500-1000",
      value: "2",
    },
    {
      label: "1000-2000",
      value: "6",
    },
    {
      label: "2000以上",
      value: "4",
    },
  ],
};
let colorList = [
  "#ED964B",
  "#67CEA1",
  "#79C1E4",
  "#E5B72A",
  "#77BFE2",
  "#9062B4",
  "#ED964B",
  "#3F9190",
];
export function chartData65(val) {
  // if val?
  let arr = [];
  let arr1 = [];
  overview.SectionC.map((m) => {
    arr.push({ value: Number(m.value), name: m.label });
    arr1.push(Number(m.value));
  });

  let opt = {
    backgroundColor: "#243c54",

    title: {
      text: `{b|待办事项}\n {a|${isTotal(arr1)}}`,
      textStyle: {
        rich: {
          a: {
            color: "#fff",
            fontSize: 12,
            align: "center",
            fontWeight: "bold",
            padding: [10, 0, 0, 0],
          },
          b: {
            fontSize: 12,
            color: "#fff",
            fontWeight: "bold",
            align: "center",
            padding: [0, -10, 0, 0],
          },
        },
      },
      // itemGap: 10,
      x: "35%",
      y: "center",
    },
    tooltip: {
      //提示框组件
      trigger: "item", //触发类型(饼状图片就是用这个)
      formatter: "{a} <br/>{b} : {c} ({d}%)", //提示框浮层内容格式器
    },
    color: colorList, //手动设置每个图例的颜色
    legend: {
      //图例组件
      //right:100,  //图例组件离右边的距离
      orient: "horizontal", //布局  纵向布局 图例标记居文字的左边 vertical则反之
      width: 40, //图行例组件的宽度,默认自适应
      x: "80%", //图例显示在右边
      y: "11%", //图例在垂直方向上面显示居中
      itemWidth: 10, //图例标记的图形宽度
      itemHeight: 10, //图例标记的图形高度
      icon: "circle", //图例的图标样式
      itemGap: 25,
      textStyle: {
        //图例文字的样式
        color: "#fff", //文字颜色
        fontSize: 12, //文字大小
      },
    },
    series: [
      //系列列表
      {
        name: "设备状态", //系列名称
        type: "pie", //类型 pie表示饼图
        center: ["40%", "48%"], //设置饼的原心坐标 不设置就会默认在中心的位置
        radius: ["40%", "50%"], //饼图的半径,第一项是内半径,第二项是外半径,内半径为0就是真的饼,不是环形

        label: {
          //饼图图形上的文本标签
          show: true, //平常不显示
          color: "#fff",
          fontSize: 13,
        },
        labelLine: {
          //标签的视觉引导线样式
          show: true, //平常不显示
        },

        data: arr,
      },
    ],
  };
  return opt;
}
export function chartData66(val) {
  // if val?
  let arr = [];
  let arr1 = [];
  overview.SectionC.map((m) => {
    arr.push({ value: Number(m.value), name: m.label });
    arr1.push(Number(m.value));
  });
  const color = ["#F3994C ", "#66CC9F"];
  const legendData = ["累计刷进", "累计刷出"];
  const xPoint = ["A1", "A2", "C1", "C2", "C3", "C4", "C5"];
  let opt = {
    backgroundColor: "#243c54",

    grid: {
      top: "15%",
      bottom: "10%",
      left: "5%",
      right: "3%",
    },
    xAxis: {
      type: "category",
      boundaryGap: false,
      axisLabel: {
        // X轴刻度标签
        color: "#fff",
        fontSize: 12,
      },
      axisLine: {
        // X轴线
        show: true,
        lineStyle: {
          color: "rgba(255, 255, 255, .6)",
        },
      },
      splitLine: {
        // 网格线
        show: false,
        lineStyle: {
          type: "dashed",
          width: 1,
          color: "rgba(255, 255, 255, .3)",
        },
      },
      axisTick: {
        show: false,
      },
      data: xPoint,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
      splitLine: {
        // 网格线
        show: true,
        lineStyle: {
          type: "solid",
          width: 1,
          color: "rgba(255, 255, 255, .4)",
        },
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    legend: {
      data: legendData,
      left: "3%",
      top: 10,
      itemHeight: 8,
      textStyle: {
        fontSize: 12,
        color: "#fff",
      },
      itemStyle: {
        borderWidth: 6,
        borderColor: "rgba(51, 181, 255, .2)",
      },
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(33, 85, 154, .6)",
      borderWidth: 1,
      borderColor: {
        type: "linear",
        x: 0,
        y: 0,
        x2: 0,
        y2: 1,
        colorStops: [
          {
            offset: 0,
            color: "rgba(85, 149, 233, .6)", // 0% 处的颜色
          },
          {
            offset: 1,
            color: "rgba(85, 149, 233, 0)", // 100% 处的颜色
          },
        ],
        global: false, // 缺省为 false
      },
      padding: 8,
      textStyle: {
        color: "#333",
      },
      axisPointer: {
        lineStyle: {
          type: "dashed",
          color: "rgba(255, 255, 255, .6)",
        },
      },
      extraCssText: "box-shadow: 2px 2px 16px 1px rgba(0, 39, 102, 0.16)",
      formatter: function (params) {
        let content = `<div style='font-size: 14px; color: #333;'>${params[0].name}</div>`;
        if (Array.isArray(params)) {
          for (let i = 0; i < params.length; i++) {
            content += `
                  <div style='display: flex; align-items: center; padding: 4px; background: #21559A; margin-top: 4px; color: #333;'>
                    <div style='width: 10px; height: 10px; background: ${params[i].color}; margin-right: 8px;'></div>
                    <div style='font-size: 12px; margin-right: 32px;'>${params[i].seriesName}</div>
                    <div style='font-size: 14px;'>${params[i].value}</div>
                  </div>
                `;
          }
        }
        return content;
      },
    },
    series: [
      {
        name: legendData[0],
        type: "line",
        symbol: "circle",
        symbolSize: 10,
        itemStyle: {
          color: color[0],
          borderWidth: 6,
          borderColor: "rgba(51, 181, 255, .2)",
        },
        lineStyle: {
          normal: {
            width: 2,
            color: color[0], // 线条颜色
          },
        },
        label: {
          show: false,
          color: "rgba(255,255,255, 0.6)",
        },
        data: [1, 8, 1, 3, 1, 3, 1],
      },
      {
        name: legendData[1],
        type: "line",
        symbol: "circle",
        symbolSize: 10,
        itemStyle: {
          color: color[1],
          borderWidth: 6,
          borderColor: "rgba(51, 181, 255, .2)",
        },
        lineStyle: {
          normal: {
            width: 2,
            color: color[1], // 线条颜色
          },
        },
        label: {
          show: false,
          color: "rgba(255,255,255, 0.6)",
        },
        data: [2, 4, 5, 1, 6, 1, 1],
      },
    ],
  };
  return opt;
}
export function chartData67(val) {
  // if val?
  // let arr = [];
  // let arr1 = [];
  // overview.SectionC.map((m) => {
  //   arr.push({ value: Number(m.value), name: m.label });
  //   arr1.push(Number(m.value));
  // });
  let opt = {
    backgroundColor: "#243c54",

    tooltip: {
      trigger: "axis",
      padding: [5, 10, 5, 10],
      backgroundColor: "rgba(0,0,0,0.6)",
      borderColor: "transparent",
      formatter: (param) => `
          <div class="inundationRiskChart-popup">
            <p class="top">
                <span>${param[0]?.axisValue} </span>
            </p>
            ${param
          .map(
            (item) => `
                <p class="item">
                    <i class="icon" style="background-color:${item.color.colorStops[0]?.color || "red"
              }"></i>
                    <span class="name">${item.seriesName}</span>
                    <span class="value"><b>${formatToFixed(item.data)}</b>${item.data !== "--" ? "km²" : ""
              }</span>
                </p>`
          )
          .join("")}
          </div>`,
    },
    grid: {
      left: "3%",
      right: "6%",
      bottom: "10%",
      top: "16%",
      containLabel: true,
    },
    legend: {
      icon: "roundRect",
      bottom: 5,
      bottom: "0%",
      itemHeight: 8,
      itemWidth: 8,
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
    },
    xAxis: {
      type: "category",
      data: ["月卡车位", "临卡车位"],
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
      axisLine: {
        lineStyle: {
          color: "#e5e5e5",
        },
      },
      axisTick: {
        show: true,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "value",
      offset: 0,
      // name: "单位 km²",
      axisLabel: {
        color: "#fff",
        fontSize: 12,
      },
      nameTextStyle: {
        color: "#9eaaba",
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "rgba(49,105,129,0.4)",
          type: "dashed",
        },
      },
    },
    series: [
      {
        name: "在场 ",
        type: "bar",
        stack: "策略变更",
        barWidth: "20%",
        itemStyle: {
          normal: {
            color: "#68CFA1",
          },
        },
        label: {
          show: true,
          color: "#fff",
          fontSize: 12,
          align: "center",
          formatter: function (param) {
            return param.value;
          },
        },
        data: [60, 82],
      },
      {
        name: "剩余",
        type: "bar",
        stack: "策略变更",
        barWidth: "20%", //柱子宽度
        itemStyle: {
          //柱子颜色
          normal: {
            color: "#EC964C",
          },
        },
        label: {
          show: true,
          color: "#fff",
          fontSize: 12,
          align: "center",
          formatter: function (param) {
            return param.value;
          },
        },
        data: [320, 332],
      },
    ],
  };
  return opt;
}
const charsColor = [
  "#FF9C00",
  "#00FFCC",
  "#F5264C",
  "#4BD3FE",
  "#3339FD",
  "#EDEEEB",
];
export function chartData13() {
  var val = [
    { label: "测试1", total: 1 },
    { label: "测试2", total: 1 },
    { label: "测试3", total: 1 },
  ];
  let arr = [];
  let arr1 = [];
  val.map((m) => {
    arr.push({ value: m.total, name: m.label });
    arr1.push(Number(m.total));
  });
  const opt = {
    backgroundColor: "#243c54",

    color: charsColor,
    title: {
      text: `{b|总计}\n {a|${isTotal(arr1)}个}`,
      textStyle: {
        rich: {
          a: {
            color: "#fff",
            fontSize: 12,
            align: "center",
            fontWeight: "bold",
            padding: [3, 0, 0, 0],
          },
          b: {
            fontSize: 12,
            color: "#fff",
            fontWeight: "500",
            align: "center",
            padding: [0, -5, 0, 0],
          },
        },
      },
      // itemGap: 10,
      x: "26%",
      y: "center",
    },
    tooltip: {
      show: false,
      formatter: "{b}{c}个 \t{d}%",
    },
    legend: {
      orient: "vertical",
      right: "10%",
      top: "center",
      icon: "none",
      itemGap: 15,
      itemWidth: 8,
      itemHeight: 5,
      textStyle: {
        fontFamily: "微软雅黑",
        color: "#fff",
        fontSize: 12,
        fontStyle: "normal",
        fontWeight: "normal",
        rich: {
          a: {
            // 设置图例标记的样式
            backgroundColor: ["#3337FD", "#44B2FD", "#51FDDE"], // 使用系列颜色
            width: 35, // 图例标记宽度
            height: 4, // 图例标记高度
            align: "top",
          },
          b: {
            padding: [0, 30],
          },
          c: {
            width: 35, // 图例标记宽度
          },
        },
      },
      formatter: (name) => {
        let count = "";
        arr.map((item) => {
          if (name == item.name) {
            count = `{a|}\n\n {c|${item.name}} {b|${item.value}个}`;
          }
        });
        return count;
      },
    },
    series: [
      {
        type: "pie",
        // startAngle:45,
        radius: ["45%", "60%"],
        center: ["30%", "50%"],
        clockwise: true,
        zIndex: 4,
        avoidLabelOverlap: true,
        label: {
          alignTo: "labelLine",
          color: "#fff",
          formatter: (params) => {
            return params.value;
          },
          rich: {
            color: "#fff",

            a: {
              color: "rgba(28, 31, 35, 0.80)",
              fontSize: "15px",
            },
            b: {
              color: "#1C1F23",
              fontSize: "14px",
              fontWeight: "600",
            },
          },
        },
        labelLine: {
          //label线的长度
          show: true,
          length: 0,
          length2: 10,
          lineStyle: {
            // type: "dashed",
            width: 1,
          },
        },
        itemStyle: {
          normal: {
            borderWidth: 5,
            // borderColor: '#fff'
          },
        },
        data: arr,
      },
    ],
  };
  return opt;
}
export function chartData11(val) {
  let data = [1, 2, 3, 4, 5];
  let XData = ["1月", "2月", "3月", "4月", "5月"];
  // val.map((i) => {
  //   data.push(i["2025tzjh"]);
  //   XData.push(i.label + "月");
  // });
  // console.log(val, data, "月份");

  let opt = {
    backgroundColor: "#243c54",

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
      textStyle: {
        color: "#fff",
        fontSize: 12,
      },
      confine: true, // 超出范围
      backgroundColor: "rgba(17,95,182,0.5)", //设置背景颜色
      //   borderColor: "rgba(255, 255, 255, .8)",
      formatter: "{b}<br>{a}：{c}/kwh<br>{a1}：{c1}/",
    },
    legend: {
      show: false,
      top: "4%",
      left: "center",
      itemWidth: 18,
      itemHeight: 10,
      itemGap: 30,
      textStyle: {
        fontSize: 12,
        color: "#fff",
        padding: [0, 0, 0, 10],
      },
      // 图例样式
      data: [
        {
          name: "今日负荷",
          // 强制设置图形为圆。
          icon: "circle",
          textStyle: {
            color: "#fff",
          },
        },
        {
          name: "昨日负荷",
          icon: "pin",
          textStyle: {
            color: "#fff",
          },
        },
        {
          name: "平均值",
          //  dataURI: 'image://http://example.website/a/b.png',
          icon: "pin",
          textStyle: {
            color: "#fff",
          },
        },
      ],
    },
    grid: {
      top: "15%",
      left: "15%",
      right: "3%",
      bottom: "10%",
      containLabel: false,
    },
    xAxis: [
      {
        type: "category",
        data: XData,
        axisTick: {
          show: true,
          alignWithLabel: true,
        },
        axisLine: {
          lineStyle: {
            color: "#fff",
          },
        },
        axisLabel: {
          interval: 0,
          margin: 10,
          color: "#05D5FF",
          textStyle: {
            fontSize: 12,
            color: "#fff",
          },
        },
      },
    ],
    yAxis: [
      {
        type: "value",
        name: "",
        splitNumber: 5,
        min: 0,
        max: 2000,
        interval: 400,
        nameTextStyle: {
          color: "#fff",
          fontSize: 12,
          align: "center",
          padding: [0, 28, 0, 0],
        },
        axisLabel: {
          formatter: "{value}",
          // color: "rgba(95, 187, 235, 1)",
          textStyle: {
            fontSize: 12,
            color: "#fff",
            // lineHeight: 16,
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#295FA1",
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          lineStyle: {
            color: "#295FA1",
            type: "dashed",
          },
        },
      },
      { type: "value", show: false }, // 右侧 Y 轴，设置为不显示
    ],
    series: [
      {
        name: "",
        type: "line",
        yAxisIndex: 1, // 与第二个 y 轴关联
        showSymbol: true,
        symbolSize: 4,
        lineStyle: {
          normal: {
            color: "#00FFF6",
          },
        },
        itemStyle: {
          color: "#fff",
          borderColor: "#000",
          borderWidth: 5,
        },
        label: {
          show: false,
          position: "top",
          textStyle: {
            fontSize: 9,
            color: "#91CDFE",
          },
        },
        // areaStyle 定义了图表区域的样式。
        // color 属性使用了线性渐变。
        // x 和 y 设置了渐变的起点（0, 0），而 x2 和 y2 设置了渐变的终点（0, 1），表示从上到下的渐变。
        // colorStops 定义了渐变的颜色停靠点。这里设置了从黄色（offset: 0）到透明（offset: 1）的渐变。
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 1,
                color: "transparent",
              },
              {
                offset: 0,
                color: "#00FFF6",
              },
            ],
          },
        },
        data: data, // 折线图的数据
      },
    ],
  };
  return opt;
}
export function chartData37() {
  var normaldata = [
    {
      zbPercentValue: 0.00003865219786060085,
      zbTitle: "指标值",
      name: "数量",
      Attributes: {
        MAINDIMMEMBER_NAMECOLUMN: "数量",
        MAINDIMMEMBER_KEYCOLUMN: "SL",
        MAINDIM_NAMECOLUMN: "zbTitle",
        MAINDIM_KEYCOLUMN: "zbName",
        C_ZBNAME: "zbValue",
        DRILL_DOWN: "false",
      },
      itemStyle: {
        color: "#E6BB2B",
      },
      label: {
        color: "#E6BB2B",
      },
      value: 50,
    },
    {
      zbPercentValue: 0.9999613478021394,
      zbTitle: "指标值",
      name: "原值",
      Attributes: {
        MAINDIMMEMBER_NAMECOLUMN: "原值",
        MAINDIMMEMBER_KEYCOLUMN: "YZ",
        MAINDIM_NAMECOLUMN: "zbTitle",
        MAINDIM_KEYCOLUMN: "zbName",
        C_ZBNAME: "zbValue",
        DRILL_DOWN: "false",
      },
      itemStyle: {
        color: "#E05541",
      },
      label: {
        color: "#E05541",
      },
      value: 50,
    },
    {
      zbPercentValue: 0.9999613478021394,
      zbTitle: "指标值",
      name: "原值",
      Attributes: {
        MAINDIMMEMBER_NAMECOLUMN: "原值",
        MAINDIMMEMBER_KEYCOLUMN: "YZ",
        MAINDIM_NAMECOLUMN: "zbTitle",
        MAINDIM_KEYCOLUMN: "zbName",
        C_ZBNAME: "zbValue",
        DRILL_DOWN: "false",
      },
      itemStyle: {
        color: "#E05541",
      },
      label: {
        color: "#E05541",
      },
      value: 50,
    },
  ];
  var colorList = [
    "rgba(6, 194, 255, 1)",
    "rgba(255, 205, 40, 1)",
    "rgba(235,42,55,1)",
    // 'rgba(41, 242, 255, 1)',
  ];
  // 颜色值配置一个空，用于显示间距
  const colorList1 = [];
  const colorList2 = [];
  colorList.forEach((item) => {
    colorList1.push(item);
    colorList1.push("");
    colorList2.push(item.replace(/,\s*\d+(\.\d+)?\)/, ", 0.3)"));
    colorList2.push("");
  });
  let sum = 0;
  let valdata = [];
  normaldata.forEach((item) => {
    sum += Number(item.value);
  });
  normaldata.forEach((item) => {
    valdata.push({ value: item.value, name: item.name });
    // 配置一个空值
    valdata.push({
      name: "",
      value: sum / 100,
      itemStyle: { color: "transparent" },
    });
  });
  const option = {
    backgroundColor: "#243c54",
    // tooltip: {
    //   trigger: 'item'
    // },
    legend: {
      // orient: "vertical",
      orient: "horizontal",
      left: "center",
      // top: "middle",
      bottom: 20,
      icon: "none",
      width: 450,
      // left: 400,
      itemWidth: 6,
      itemHeight: 6,
      // itemStyle: {
      //     color: '#00f'
      // },
      formatter: (name) => {
        let obj = normaldata.find((item) => item.name === name);
        const arr = [`{iconName|}{name|${name}}`];
        return arr.join("");
      },
      textStyle: {
        color: "#FFF",
        fontSize: 12,
        rich: {
          name: {
            color: "rgba(144, 178, 210, 1)",
            fontSize: 12,
            width: 100,
            padding: [0, 0, 0, 10],
          },
        },
      },
      data: normaldata.map((dItem, dIndex) => {
        return {
          ...dItem,
          textStyle: {
            rich: {
              iconName: {
                width: 8,
                height: 8,
                // borderRadius: 7,
                backgroundColor: colorList[dIndex % colorList.length],
              },
              percent: {
                color: colorList[dIndex % colorList.length],
              },
            },
          },
        };
      }),
    },

    series: [
      {
        type: "pie",
        name: "TypeB", // 内层细圆环2
        radius: ["40%", "44.5%"],
        center: ["50%", "40%"],
        hoverAnimation: false,
        clockWise: false,
        itemStyle: {
          normal: {
            color: "rgba(2, 131, 255, 0.35)",
          },
        },
        label: {
          show: false,
        },
        data: [100],
      },
      // {
      //     // 饼图圈
      //     type: 'pie',
      //     zlevel: 3,
      //     radius: ['40%', '48%'],
      //     center: ['50%', '40%'],
      //     itemStyle: {
      //         normal: {
      //             //  borderColor: '#0A1934',
      //             // borderWidth:5,
      //             color: function (params) {
      //                 return colorList2[params.dataIndex%colorList2.length];
      //             }
      //         }
      //     },
      //     label: {
      //         show: false
      //     },
      //     data: valdata
      // },
      {
        // 最外圆环
        type: "pie",
        zlevel: 1,
        silent: true, //取消高亮
        radius: ["48%", "50%"],
        center: ["50%", "40%"],
        itemStyle: {
          normal: {
            //  borderColor: '#0A1934',
            // borderWidth:5,
            color: function (params) {
              return colorList1[params.dataIndex % colorList1.length];
            },
          },
        },

        label: {
          padding: [0, -75],
          alignTo: "labelLine",
          // position:'outside',
          // edgeDistance: '25%',
          // alignTo:'edges',
          // formatter: '{c|{c}}\n{d|{d}}',
          formatter: (params) => {
            return params.name
              ? `{dot|}   {d|${params.name} ${params.percent}%}\n\n{c|${params.value}间/套}`
              : ``;
          },
          rich: {
            c: {
              color: "rgba(255, 255, 255, 1)",
              fontSize: 14,
              lineHeight: 20,
              margin: 20,
            },
            d: {
              fontSize: 14,
              color: "rgba(255, 255, 255, .7)",
            },
            dot: {
              backgroundColor: "auto", // 适应颜色
              width: 0,
              height: 0,
              borderRadius: 3, // 保证是圆角
              fontSize: 16,
              padding: [3, -3, 3, -3], // 这里就保证是要给宽高6的正方形
            },
          },
        },
        labelLine: {
          length: 50,
          length2: 70,
        },
        data: valdata,
      },
      {
        type: "pie", //最外圆圈
        radius: ["57%", "57.3%"],
        // radius: ['44%', '50%'],
        center: ["50%", "40%"],
        // radius: '90%',
        hoverAnimation: false,
        clockWise: false,

        itemStyle: {
          normal: {
            shadowBlur: 1,
            shadowColor: "rgba(15, 79, 150,0.61)",
            color: "rgba(255,255,255,.3)",
            // borderColor: '#1f1e26',
            // borderWidth: 5,
          },
        },
        label: {
          show: false,
        },
        data: [0],
        // data: labelData,
      },
      {
        type: "pie", //点
        radius: ["57%", "57.9%"],
        center: ["50%", "40%"],
        // radius: '90%',
        hoverAnimation: false,
        clockWise: false,
        color: ["#55c2e200", "rgba(6, 192, 252, 1)", "#ff5a6100", "ff5a6100"],
        label: {
          show: false,
        },
        data: [30, 10, 240, 30],
        // data: [30,30,30,30,30,30],
      },
      {
        type: "pie", //点
        radius: ["57%", "57.9%"],
        center: ["50%", "40%"],
        // radius: '90%',
        hoverAnimation: false,
        clockWise: false,
        // color: ['#55c2e200', 'rgba(23,138,173,1)', '#ff5a6100', 'ff5a6100'],
        label: {
          show: false,
        },
        data: [170, 15, 240, 30],
        // data: [30,30,30,30,30,30],
      },
      {
        type: "pie", //点
        radius: ["57%", "57.9%"],
        center: ["50%", "40%"],
        // radius: '90%',
        hoverAnimation: false,
        clockWise: false,
        // color: ['#55c2e200', 'rgba(23,138,173,1)', '#ff5a6100', 'ff5a6100'],
        label: {
          show: false,
        },
        data: [250, 15, 130, 30],
        // data: [30,30,30,30,30,30],
      },
      {
        type: "pie", //点
        radius: ["57%", "57.9%"],
        center: ["50%", "40%"],
        // radius: '90%',
        hoverAnimation: false,
        clockWise: false,
        // color: ['#55c2e200', 'rgba(23,138,173,1)', '#ff5a6100', 'ff5a6100'],
        label: {
          show: false,
        },
        data: [250, 10, 10, 20],
        // data: [30,30,30,30,30,30],
      },
    ],
  };

  return option;
}
export function chartData49() {
  // 初始化图表数据
  let legendData = ["菜篮子企业", "稳产保供重点企业"];
  let xAxisData = ["2021", "2022", "2023", "2024", "2025", "2026"];
  let seriesData = [1, 4, 5, 6, 6, 2];
  let seriesData1 = [1, 2, 4, 3, 6, 5];

  const option = {
    backgroundColor: "#243c54",

    tooltip: {
      trigger: "axis",
      axisPointer: {
        type: "shadow",
      },
    },
    legend: {
      icon: "rect",
      right: "0%",
      top: "2%",
      itemWidth: 7, // 设置宽度
      itemHeight: 7, // 设置高度
      itemGap: 15, // 设置间距
      textStyle: {
        //图例文字的样式
        color: "#fff",
        fontSize: 12,
      },
    },
    grid: {
      top: "30%",
      left: "5%",
      right: "2%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      data: xAxisData,
      axisLine: {
        lineStyle: {
          color: "rgba(117, 168, 202, 0.4)",
        },
        show: true,
      },
      axisTick: {
        show: false,
      },

      axisLabel: {
        color: "#fff",
        fontSize: 12,
        interval: 0,
      },
    },
    yAxis: [
      {
        name: "个          ",
        type: "value",
        inverse: false,
        splitLine: {
          show: true,
          lineStyle: {
            color: "rgba(117, 168, 202, 0.3)",
            type: "dashed",
          },
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "##89BFE5",
          },
        },
        axisLabel: {
          formatter: "{value}",
          textStyle: {
            color: "#fff",
          },
        },
        nameTextStyle: {
          color: "#fff",
          padding: [0, 0, 0, 15],
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      // 左
      {
        name: legendData[0],
        type: "bar",
        barWidth: 8,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(4, 169, 255, 1)",
              },
              {
                offset: 1,
                color: "rgba(4, 169, 255,0)",
              },
            ]),
          },
        },
        data: seriesData,
      },
      // 右
      {
        name: legendData[0],
        type: "bar",
        barWidth: 10,
        barGap: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(0, 67, 123, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 67, 123, 0)",
              },
            ]),
          },
        },
        data: seriesData,
        tooltip: {
          show: false,
        },
      },
      // 上部
      {
        name: legendData[0],
        type: "pictorialBar",
        symbolSize: [20, 6],
        symbolOffset: [-9, -4],
        symbolPosition: "end",
        symbol: "diamond",
        z: 12,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(4, 166, 251, 1)",
              },
              {
                offset: 1,
                color: "rgba(2, 131, 197, 1)",
              },
            ]),
          },
        },
        tooltip: {
          show: false,
        },
        data: seriesData,
      },
      // 左
      {
        name: legendData[1],
        type: "bar",
        barWidth: 8,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(4, 255, 169, 1)",
              },
              {
                offset: 1,
                color: "rgba(4, 255, 169, 0)",
              },
            ]),
          },
        },
        data: seriesData1,
      },
      // 右
      {
        type: "bar",
        barWidth: 10,
        barGap: 0,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(4, 135, 91, 1)",
              },
              {
                offset: 1,
                color: "rgba(4, 135, 91, 0)",
              },
            ]),
          },
        },
        data: seriesData1,
        tooltip: {
          show: false,
        },
      },
      // 上部
      {
        type: "pictorialBar",
        symbolSize: [20, 6],
        symbolOffset: [9, -4],
        symbolPosition: "end",
        symbol: "diamond",
        z: 12,
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(10, 167, 88, 1)",
              },
              {
                offset: 1,
                color: "rgba(10, 167, 88, 1)",
              },
            ]),
          },
        },
        tooltip: {
          show: false,
        },
        data: seriesData1,
      },
    ],
  };

  return option;
}
export const chartData71 = {
  backgroundColor: "#EBF1FA",
  title: [
    {
      text: "开始测速",
      x: "center",
      top: "65%",
      textStyle: {
        fontSize: 16,
        fontWeight: 400,
      },
    },
  ],
  series: [
    {
      type: "gauge",
      radius: "60%",
      detail: {
        formatter: function (name) {
          return `{title|${name}} \n Mbps`;
        },
        show: true,
        offsetCenter: [0, 0],
        fontWeight: 400,
        fontSize: 14,
        textStyle: {
          rich: {
            title: {
              fontSize: 22,
              color: "#525970",
              fontWeight: 600,
            },
          },
        },
      },
      data: [
        {
          value: 59.66,
        },
      ],
      axisLine: {
        show: true,
        lineStyle: {
          width: 20,
          color: [[1, "#33333333"]],
        },
      },
      progress: {
        show: true,
        width: 20,
        itemStyle: {
          color: {
            // type: 'linear',
            colorStops: [
              {
                offset: 0,
                color: "#E5E8F1", // 0% 处的颜色
              },
              {
                offset: 0.5,
                color: "#00DEFF", // 0% 处的颜色
              },
              {
                offset: 1,
                color: "#2B8AE8", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        distance: 2,
        show: true,
        lineStyle: {
          color: "#999999",
          width: 1,
          splitLine: 5,
        },
      },
      axisLabel: {
        show: true,
        color: "#999999",
      },
      pointer: {
        show: true,
        width: 4,

        itemStyle: {
          color: "#00DEFF",
        },
      },
    },
    {
      // 背景渐变色
      type: "pie",
      radius: "70%",
      // 不响应及触发鼠标事件
      silent: true,
      // 关闭背景动画
      animation: false,
      z: 0,
      itemStyle: {
        color: {
          type: "radial", // 径向渐变
          x: 0.5,
          y: 0.5,
          r: 0.5,
          colorStops: [
            {
              offset: 0,
              color: "rgba(235, 238, 244, 0)",
            },
            {
              offset: 0.8,
              color: "rgba(235, 238, 244, 0)",
            },
            {
              offset: 1,
              color: "rgba(235, 238, 244, 1)",
            },
          ],
        },
      },
      data: [80],
    },
  ],
};
export function chartData51() {
  const xAxisData = ["第一列", "第二列", "第三列", "第四列"];
  const seriesData = [
    {
      measureUnit: "吨",
      value: 500,
    },
    {
      measureUnit: "吨",
      value: 800,
    },
    { measureUnit: "吨", value: 400 },
    { measureUnit: "吨", value: 300 },
  ];

  let maxAmount = 0;
  // let maxValueArr = [];
  seriesData.map((item) => {
    item.value > maxAmount ? (maxAmount = item.value) : (maxAmount = maxAmount);
  });

  let maxValArr = new Array(seriesData.length).fill(maxAmount);

  const option = {
    //你的代码
    backgroundColor: "#08244d",
    legend: {
      show: false,
      icon: "rect",
      textStyle: {
        color: "#fff",
      },
    },

    grid: {
      top: "20%",
      left: "5%",
      right: "2%",
      bottom: "2%",
      containLabel: true,
    },
    xAxis: {
      type: "category",
      axisLabel: {
        fontSize: 11,
        color: "#fff",
        interval: 0,
      },
      axisLine: {
        show: true,
        lineStyle: {
          width: 1,
          color: "#fff",
        },
      },
      data: xAxisData,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        fontSize: 11,
        color: "#fff",
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#fff",
        },
      },
      splitLine: {
        lineStyle: {
          color: "#0F2E60",
        },
      },
    },
    series: [
      {
        name: "全量背景图",
        type: "bar",
        barGap: "-100%",
        data: maxValArr,
        barWidth: 30,
        itemStyle: {
          normal: {
            color: "rgba(63, 169, 245, 0.2)",
          },
        },
        z: 0,
      },
      {
        type: "pictorialBar",
        name: "渐变背景",
        barWidth: 14,
        symbol: "rect",
        symbolSize: "100%",
        symbolPosition: "start",
        symbolOffset: [0, 0],
        label: {
          normal: {
            show: true,
            position: "top",

            formatter: (params) => {
              return [...Object.values(seriesData[params.dataIndex])].join(
                "\n"
              );
            },
            fontSize: 12,
            lineHeight: 16,
            color: "#fff",
          },
        },
        itemStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(221, 255, 252, 1)",
              },
              {
                offset: 0.1,
                color: "rgba(8, 239, 222, 1)",
              },
              {
                offset: 1,
                color: "rgba(0, 128, 167, 0.20)",
              },
            ]),
          },
        },
        z: 1,
        zlevel: 0,
        data: seriesData.map((item) => {
          return item.value;
        }),
      },
      {
        type: "pictorialBar",
        name: "块状切片",
        itemStyle: {
          normal: {
            color: "#011140",
          },
        },
        barWidth: 14,
        symbolRepeat: 28,
        symbol: "rect",
        symbolClip: true,
        symbolSize: [14, 2],
        symbolPosition: "start",
        symbolOffset: [0, 0],
        data: seriesData.map((item) => {
          return item.value;
        }),
        z: 2,
        zlevel: 0,
      },
    ],
  };

  return option;
}
import img1 from "@/assets/imgs/31.png";

export function chartData62() {
  const opt = {
    tooltip: { show: false },
    animationDuration: 1000,
    animationEasingUpdate: "quinticInOut",
    series: [
      {
        name: "",
        type: "graph",
        layout: "force",
        force: {
          repulsion: 1000,
          edgeLength: 50,
        },
        // symbolSize: 55,
        roam: true, // 整个是否可拖动
        // edgeSymbol: ['circle', 'arrow'],

        // draggable: false,
        // zoom: 1,
        itemStyle: {
          normal: {
            borderWidth: 2,
          },
        },
        data: [
          {
            id: 1,
            name: "滁州市",
            draggable: true, // 是否可以拖拽，默认false
            category: "项目类型", // 这是种类，运维1测试2应用3实施4开发5
            // number: 0, // 这是编号 非必须，目的仅为方便编写line
            // value: [300, 45], //图形大小
            symbol: `image://${img1}`,
            symbolSize: [200, 200],
            // showNum: 25, //节点需要显示的额外内容
            itemStyle: {
              normal: {
                color: "#3059BD",
              },
            },
          },
          {
            id: 6,
            name: "4县",
            draggable: true, // 是否可以拖拽，默认false
            symbolSize: 53,
            category: "评标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#F5384F",
              },
            },
          },
          {
            id: 7,
            name: "2区",
            draggable: true, // 是否可以拖拽，默认false
            symbolSize: 53,
            category: "评标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#6F6CFD",
              },
            },
          },
          {
            id: 8,
            name: "2县市",
            draggable: true, // 是否可以拖拽，默认false
            symbolSize: 55,
            category: "评标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#50FD84",
              },
            },
          },
          {
            id: 12,
            name: "凤阳",
            draggable: true, // 是否可以拖拽，默认false
            symbolSize: 55,
            category: "定标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#F36E71",
              },
            },
          },
          {
            id: 13,
            name: "定远",
            draggable: true, // 是否可以拖拽，默认false
            symbolSize: 55,
            category: "定标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#F9B3BE",
              },
            },
          },
          {
            id: 14,
            name: "来安",
            draggable: true, // 是否可以拖拽，默认false
            symbolSize: 55,
            category: "定标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#F46A53",
              },
            },
            label: {
              textBorderColor: "rgba(238, 102, 102, 1)",
            },
          },
          {
            id: 15,
            name: "全椒",
            draggable: true, // 是否可以拖拽，默认false
            symbolSize: 55,
            category: "定标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#F4AB82",
              },
            },
          },
          {
            id: 16,
            name: "琅琊",
            draggable: true, // 是否可以拖拽，默认false

            symbolSize: 55,
            category: "定标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#5E64B8",
              },
            },
          },
          {
            id: 17,
            name: "南谯",
            draggable: true, // 是否可以拖拽，默认false
            symbolSize: 55,
            category: "定标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#F46A53",
              },
            },
          },
          {
            id: 18,
            name: "天长",
            symbolSize: 55,
            category: "定标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#47E1AC",
              },
            },
          },
          {
            id: 19,
            name: "明光",
            symbolSize: 55,
            category: "定标办法",
            value: 10,
            itemStyle: {
              normal: {
                color: "#47E1AC",
              },
            },
          },
        ],
        edges: [
          {
            source: "0",
            target: "1",
          },
          {
            source: "0",
            target: "2",
          },
          {
            source: "0",
            target: "3",
          },
          {
            source: "0",
            target: "4",
          },
          {
            source: "0",
            target: "5",
          },
          {
            source: "1",
            target: "6",
          },
          {
            source: "1",
            target: "7",
          },
          {
            source: "1",
            target: "8",
          },
          {
            source: "2",
            target: "9",
          },
          {
            source: "2",
            target: "10",
          },
          {
            source: "2",
            target: "11",
          },
          {
            source: "6",
            target: "12",
          },
          {
            source: "6",
            target: "13",
          },
          {
            source: "6",
            target: "14",
          },
          {
            source: "6",
            target: "15",
          },
          {
            source: "7",
            target: "16",
          },
          {
            source: "7",
            target: "17",
          },
          {
            source: "8",
            target: "18",
          },
          {
            source: "8",
            target: "19",
          },
        ],
        categories: [
          {
            name: "项目类型",
          },
          {
            name: "评标办法",
          },
          {
            name: "父节点",
          },
          {
            name: "定标办法",
          },
          {
            name: "中标企业",
          },
        ],
        focusNodeAdjacency: true,
        edgeLabel: {
          normal: {
            show: false,
            formatter: function (x) {
              return x.data.name;
            },
          },
        },
        label: {
          show: true,
          normal: {
            show: true,
            position: "inside",
            color: "#fff",
            fontSize: 18,
            textBorderWidth: 1,
          },
        },
        lineStyle: {
          normal: {
            color: "#fff",
            curveness: 0,
            type: "dashed",
          },
        },
      },
    ],
  };
  return opt;
}
export function ChartData31() {
  const options = {
    series: [
      {
        name: "",
        type: "pie",
        radius: [90, 60],
        center: ["50%", "50%"],
        silent: true,
        clockwise: true,
        startAngle: 90,
        z: 0,
        zlevel: 0,
        data: [
          {
            value: 30,
            name: "",
            label: {
              normal: {
                show: false,
              },
            },
            itemStyle: {
              normal: {
                color: "#D3D8DD",
              },
            },
          },
          {
            value: 70,
            name: "",
            itemStyle: {
              normal: {
                color: "#00B03D",
              },
            },
          },
        ],
      },
      {
        type: "gauge",
        radius: 90,
        clockwise: false,
        startAngle: 90,
        endAngle: 450,
        splitNumber: 20,
        title: {
          color: "#848689",
          fontSize: 12,
          offsetCenter: [0, 40],
        },
        detail: {
          show: true, // 是否显示详情。
          textStyle: {
            fontWeight: 600,
            color: "#00B03D",
            fontSize: 24,
          },
          valueAnimation: true, // 是否开启标签的数字动画。
          formatter: "{value}%", // 格式化函数或者字符串
          offsetCenter: [0, 0],
        },
        pointer: {
          show: false,
        },
        axisLine: {
          show: true,
          lineStyle: {
            color: [[1, "transparent"]],
            width: 30,
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          distance: -30,
          length: 30,
          lineStyle: {
            color: "#fff",
            width: 3,
          },
        },
        axisLabel: {
          show: false,
        },
        data: [
          {
            name: "SOC",
            value: 70,
          },
        ],
      },
    ],
  };
  return options;
}
export function ChartData32() {
  const data = [
    { name: "公开招标", value: 259 },
    { name: "邀请招标", value: 197 },
    { name: "竞争性谈判", value: 193 },
    { name: "单一来源", value: 54 },
    { name: "竞争性磋商", value: 18 },
    { name: "询价", value: 49 },
  ];
  const colorList = [
    "#FFA600",
    "#026DB2",
    "#6DD400",
    "#5C64FF",
    "#6988F8",
    "#8221F1",
  ];

  // 计算总数
  let dataNum = 0;
  for (let i in data) {
    dataNum += data[i].value;
  }

  const option = {
    backgroundColor: "#fff",
    title: {
      text: "公告总数",
      subtext: dataNum,
      left: "170px",
      top: "center",
      itemGap: 10,
      textStyle: {
        fontSize: 14,
        color: "#999999",
      },
      subtextStyle: {
        fontSize: 19,
        fontWeight: "bold",
        color: "#333333",
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{a} <br/>{b} : {c} ({d}%)",
    },
    legend: {
      orient: "vertical",
      right: 10,
      top: "center",
      data: data.map((item) => item.name),
      textStyle: {
        color: "rgba(0,0,0,0.65)",
      },
      formatter: function (name) {
        const item = data.find((d) => d.name === name);
        return `${name}: ${item.value} 个`;
      },
    },
    series: [
      {
        name: "招标方式",
        type: "pie",
        radius: ["40%", "60%"],
        center: ["40%", "50%"],
        data: data,
        itemStyle: {
          color: function (params) {
            return colorList[params.dataIndex];
          },
        },
        label: {
          show: false,
        },
        emphasis: {
          label: {
            show: true,
            position: "center",
          },
        },
      },
    ],
  };
  return option;
}
export function ChartData33() {
  //图上角度数据
  let value = 58;

  // 圆环--开始色
  let baseColorStart = "#45A5DB";
  // 圆环--结束色
  let baseColorEnd = "#0A6BC5";
  // 圆环--环底色
  let ringColor = "#112A5D";
  const option = {
    backgroundColor: "#061740",
    // 还原内部文字
    title: [
      {
        text: value + "%",
        top: "35%",
        right: "30%",
        textStyle: {
          color: baseColorStart,
          fontSize: 32,
          fontWeight: 400,
        },
      },
      {
        text: "优秀率",
        top: "30%",
        right: "30%",
        textStyle: {
          color: "#6F87B1",
          fontSize: 18,
          fontWeight: 400,
        },
      },
    ],
    series: {
      name: "",
      type: "pie",
      radius: ["50%", "60%"],
      center: ["30%", "50%"],
      silent: true,
      clockwise: true,
      startAngle: 90,
      label: {
        show: false,
      },
      data: [
        {
          value: value,
          itemStyle: {
            normal: {
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: baseColorStart,
                  },
                  {
                    offset: 1,
                    color: baseColorEnd,
                  },
                ],
              },
            },
          },
        },
        {
          value: 100 - value,
          label: {
            normal: {
              show: false,
            },
          },
          itemStyle: {
            // 圆环底色
            normal: {
              color: ringColor,
            },
          },
        },
      ],
    },
  };
  return option;
}
export function ChartData34() {
  var data = [
    {
      name: "25岁以下",
      value: 10,
    },
    {
      name: "26~35岁",
      value: 10,
    },
    {
      name: "35~45岁",
      value: 10,
    },
    {
      name: "45~55岁",
      value: 10,
    },
    {
      name: "55岁以上",
      value: 40,
    },
  ];

  const option = {
    color: ["#4694fe", "#fe9d19", "#5aedd3", "#e2b366", "#24dcf8"],
    backgroundColor: "#02174e",
    title: {
      text: "{title|90}\n{subtitle|35岁~45岁}\n{thirdline|总人数}", // 使用自定义格式化
      subtext: "",
      textStyle: {
        rich: {
          title: { fontSize: 40, color: "#33f7d4", fontWeight: "bold" },
          subtitle: { fontSize: 22, color: "#fff", padding: [15, 0, 10, 0] },
          thirdline: { fontSize: 22, color: "#fff" },
        },
      },
      textAlign: "center",
      x: "29%",
      y: "36%",
    },
    grid: {
      bottom: 150,
      left: 100,
      right: "10%",
    },
    legend: {
      orient: "vertical",
      top: "middle",
      right: "5%",
      textStyle: {
        color: "#f2f2f2",
        fontSize: 25,
      },
      icon: "roundRect",
      data: data,
    },
    series: [
      // 主要展示层的
      {
        radius: ["35%", "55%"],
        center: ["30%", "50%"],
        type: "pie",
        tooltip: {
          show: true,
        },
        label: {
          normal: {
            show: false,
            formatter: "{c}%",
            textStyle: {
              fontSize: 30,
            },
            position: "outside",
          },
          emphasis: {
            show: true,
          },
        },
        labelLine: {
          normal: {
            show: true,
            length: 30,
            length2: 55,
          },
          emphasis: {
            show: true,
          },
        },

        name: "民警训练总量",
        data: data,
      },
      // 边框的设置

      {
        name: "刻度盘",
        type: "gauge",
        min: 0,
        max: 100,
        radius: "80%", //图表尺寸
        center: ["30%", "50%"],
        startAngle: 0,
        endAngle: 360,
        splitNumber: 12,
        z: 99,
        // 线
        axisLine: {
          lineStyle: {
            width: 25,
            color: [[1, "#022a6e"]],
          },
        },

        axisTick: {
          distance: -25,
          splitNumber: 6, //刻度的段落数
          length: 25,
          lineStyle: {
            color: "#05a4f2",
            width: 3,
          },
        },
        splitLine: {
          //文字和刻度的偏移量
          show: true,
          distance: -25,
          length: 35, //长度
          lineStyle: {
            color: "#05a4f2",
            width: 5,
          },
        },
        // //刻度线文字
        axisLabel: {
          show: false,
          color: "#858A93",
          fontSize: 16,
          distance: -30,
        },
        pointer: {
          show: false,
        },
      },
    ],
  };
  return option;
}

export function chartData22() {
  const opt = {
    // color: ['rgba(61, 137, 247, 1)', '#f07b3f'],
    title: [
      // 中心比例
      {
        text: `78%`,
        x: "33%",
        y: "40%",
        textStyle: {
          fontFamily: "Bgqc",
          fontSize: 30,
          color: "#fff",
          fontWeight: "bold",
        },
      },
      {
        text: "处置率",
        x: "38%",
        y: "58%",
        borderColor: "#fff",
        textStyle: {
          fontWeight: "normal",
          fontSize: 15,
          color: "#fff",
        },
      },
      // 模拟图例
      //   {
      //     text: `总数：{a|${164}} 个\n已关联数：{a|${64}} 个`,
      //     x: '38%',
      //     y: '69%',
      //     textStyle: {
      //       fontSize: 16,
      //       fontWeight: 'normal',
      //       color: '#444',
      //       lineHeight: 28,
      //       rich: {
      //         a: {
      //           fontSize: 16,
      //           fontWeight: 'bold',
      //         },
      //       },
      //     },
      //   },
    ],
    polar: {
      center: ["54%", "53%"],
      radius: ["53%", "68%"],
    },
    angleAxis: {
      max: 100,
      show: false,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    series: [
      {
        type: "bar",
        data: [78],
        showBackground: true,
        polarIndex: 0,
        backgroundStyle: {
          color: "#333", // 背景颜色
          borderWidth: 25,
        },
        coordinateSystem: "polar",
        roundCap: true,
        barWidth: 15,
        itemStyle: {
          opacity: 1,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "#494CF3",
            },
            {
              offset: 1,
              color: "#2AB0FF",
            },
          ]),
          shadowBlur: 0,
        },
      },
    ],
  };
  return opt;
}

export function ChartData35() {
  const option = {
    backgroundColor: "#061321",
    title: [
      {
        text: "已完成",
        x: "center",
        top: "55%",
        textStyle: {
          color: "#FFFFFF",
          fontSize: 32,
          fontWeight: "100",
        },
      },
      {
        text: "75%",
        x: "center",
        top: "38%",
        textStyle: {
          fontSize: "60",
          color: "#FFFFFF",
          fontFamily: "DINAlternate-Bold, DINAlternate",
          foontWeight: "600",
        },
      },
    ],
    tooltip: {},
    angleAxis: {
      max: 100,
      clockwise: false, // 逆时针
      // 隐藏刻度线
      show: false,
      boundaryGap: ["40%", "40%"],
      startAngle: 90,
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
    },
    polar: [
      {
        center: ["50%", "50%"], //中心点位置
        radius: "165%", //图形大小
      },
    ],
    series: [
      {
        name: "小环",
        type: "gauge",
        splitNumber: 6,
        radius: "90%", //中间装饰环
        center: ["50%", "50%"],
        startAngle: 0,
        endAngle: 360,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: true,
          lineStyle: {
            color: "#ffd74a",
            width: 10,
            shadowBlur: 1,
            shadowColor: "#00B1BF",
          },
          length: 16,
          splitNumber: 16,
        },
        splitLine: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        detail: {
          show: false,
        },
      },
      {
        type: "bar",
        z: 10,
        data: [75],
        showBackground: false,
        coordinateSystem: "polar",
        // roundCap: true, // 是否圆角
        barWidth: 30, //大的占比环
        itemStyle: {
          normal: {
            opacity: 1,
            color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
              {
                offset: 0,
                color: "#F8E38C",
              },
              {
                offset: 1,
                color: "#E6CB6A",
              },
            ]),
          },
        },
      },
      {
        // 刻度
        name: "",
        type: "gauge",
        splitNumber: 120, //刻度数量
        radius: "98%", //图表尺寸
        center: ["50%", "50%"],
        startAngle: 90,
        endAngle: -269.9999,
        axisLine: {
          show: false,
          lineStyle: {
            width: 0,
            shadowBlur: 0,
            color: [[1, "#8CC8F9"]],
          },
        },
        axisTick: {
          show: false,
        },
        splitLine: {
          show: true,
          length: 5,
          lineStyle: {
            color: "auto",
          },
        },
        axisLabel: {
          show: false,
        },
        pointer: {
          //仪表盘指针
          show: 0,
        },
        detail: {
          show: 0,
        },
      },
    ],
  };
  return option;
}

export function ChartData38() {
  const value = 20;
  const option = {
    backgroundColor: "#121740",
    series: [
      {
        type: "gauge",
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false,
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
          itemStyle: {
            borderWidth: 3,
            borderColor: "#e7b75a",
            color: "#e7b75a",
          },
        },
        axisLine: {
          lineStyle: {
            width: 5,
            color: [[1, "#383e63"]],
          },
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
          distance: 50,
        },
        data: [
          {
            value,
            detail: {
              valueAnimation: true,
              offsetCenter: ["0%", "0%"],
            },
          },
        ],
        title: {
          fontSize: 14,
        },
        detail: {
          width: 50,
          height: 14,
          fontSize: 14,
          color: "#fff",
          formatter: "{value}%",
        },
      },
    ],
  };
  return option;
}

export function ChartData41() {
  //展示数据
  const optionData = [];
  //扇形图颜色数据
  const colorList = [
    { color1: "rgba(76,167,163,0.9)", color2: "rgba(90,255,223,1)" },
    { color1: "rgba(65,149,99,0.9)", color2: "rgba(115,255,145,1)" },
    { color1: "rgba(98,167,131,0.9)", color2: "rgba(153,255,179,1)" },
    { color1: "rgba(127,177,108,0.9)", color2: "rgba(193,255,138,1)" },
    { color1: "rgba(190,164,75,0.9)", color2: "rgba(255,207,74,1)" },
    { color1: "rgba(165,123,98,0.9)", color2: "rgba(254,178,128,1)" },
    { color1: "rgba(105,123,186,0.9)", color2: "rgba(151,176,255,1)" },
    { color1: "rgba(106,102,173,0.9)", color2: "rgba(164,151,255,1)" },
    { color1: "rgba(106,76,178,0.9)", color2: "rgba(159,110,254,1)" },
    { color1: "rgba(134,109,188,0.9)", color2: "rgba(180,143,241,1)" },
    { color1: "rgba(54,122,194,0.9)", color2: "rgba(76,174,254,1)" },
    { color1: "rgba(97,145,197,0.9)", color2: "rgba(131,199,255,1)" },
  ];
  //请求的数据
  const resultData = [
    {
      name: "1月",
      value: 95,
    },
    {
      name: "2月",
      value: 100,
    },
    {
      name: "3月",
      value: 98,
    },
    {
      name: "4月",
      value: 90,
    },
    {
      name: "5月",
      value: 100,
    },
    {
      name: "6月",
      value: 97,
    },
    {
      name: "7月",
      value: 100,
    },
    {
      name: "8月",
      value: 100,
    },
    {
      name: "9月",
      value: 100,
    },
    {
      name: "10月",
      value: 100,
    },
    {
      name: "11月",
      value: 100,
    },
    {
      name: "12月",
      value: 80,
    },
  ];
  let sum = 0;
  resultData.forEach((item) => {
    sum += item.value;
  });
  resultData.forEach((item) => {
    optionData.push({ value: item.value, name: item.name });
    optionData.push({
      name: "",
      value: sum / 100,
      itemStyle: { color: "transparent" },
    });
  });
  let option = {
    backgroundColor: "#001829",
    //你的代码
    legend: [
      {
        orient: "vertical",
        right: "30%",
        top: "18%",
        itemGap: 30,
        textStyle: {
          color: "#ffffff",
          fontSize: 12,
        },
        data: ["1月", "2月", "3月", "4月", "5月", "6月"],
      },
      {
        orient: "vertical",
        right: "8%",
        top: "18%",
        itemGap: 30,
        textStyle: {
          color: "#ffffff",
          fontSize: 12,
        },
        data: ["7月", "8月", "9月", "10月", "11月", "12月"],
      },
    ],
    tooltip: {
      trigger: "item",
      formatter(params) {
        let res = "";
        const { marker, name, value } = params;
        if (name !== "") {
          res += `${marker}${name}:${value}%`;
        }
        return res;
      },
    },
    series: [
      {
        type: "pie",
        roseType: "radius",
        radius: ["20%", "60%"],
        center: ["30%", "50%"],
        label: {
          position: "inside",
          formatter(item) {
            if (item.name === "") {
              return "";
            }
            return `${item.value}%`;
          },
          textStyle: {
            fontSize: 16,
            color: "#ffffff",
          },
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          normal: {
            color(params) {
              return colorList[parseInt(params.dataIndex / 2)].color1;
            },
          },
        },
        z: 3,
        data: optionData,
      },
      {
        type: "pie",
        roseType: "radius",
        radius: ["20%", "62%"],
        center: ["30%", "50%"],
        label: {
          show: false,
        },
        labelLine: {
          show: false,
        },
        itemStyle: {
          normal: {
            color(params) {
              return colorList[parseInt(params.dataIndex / 2)].color2;
            },
          },
        },
        z: 2,
        data: optionData,
      },
    ],
  };

  return option;
}

export function ChartData54() {
  let data = [
    "01周",
    " 02周",
    " 03周",
    " 04周",
    " 05周",
    " 06周",
    " 07周",
    " 08周",
    " 09周",
    " 10周",
    " 11周",
    " 12周",
    " 13周",
    " 14周",
  ];

  let option = {
    backgroundColor: "#fff",
    tooltip: {
      trigger: "axis",
    },
    grid: {
      left: "3%",
      right: "12%",
      bottom: 20,
      top: 10,
      containLabel: true,
    },
    legend: {
      bottom: 0,
      itemWidth: 20,
      itemHeight: 10,
      data: ["2024年", "2025年"],
      textStyle: {
        color: "#242424",
        fontSize: 12,
      },
    },
    xAxis: {
      type: "category",
      data: data,
      axisLabel: {
        rotate: 320, //坐标轴字体颜色
        textStyle: {
          color: "#242424",
          fontSize: 12,
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#242424",
        },
      },
      axisTick: {
        //y轴刻度线
        show: false,
      },
      splitLine: {
        //网格
        show: false,
      },
      boundaryGap: false,
    },
    yAxis: {
      type: "value",
      axisLabel: {
        //坐标轴字体颜色
        textStyle: {
          color: "#3E3E3E",
          fontSize: 12,
        },
      },
      axisLine: {
        show: true,
        lineStyle: {
          color: "#242424",
        },
      },
      axisTick: {
        //y轴刻度线
        show: false,
      },
      splitLine: {
        //网格
        show: false,
        // lineStyle:{
        //   color:'#dadde4',
        //   type:"dashed"
        // }
      },
    },

    series: [
      {
        name: "2024年",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          color: "#2F5FFE",
          borderColor: "#fff",
          borderWidth: 2,
        },
        lineStyle: {
          normal: {
            color: "#2F5FFE",
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(52,99,254,0.52)",
              },
              {
                offset: 1,
                color: "rgba(255,255,255,0.3)",
              },
            ]),
          },
        },
        data: [80, 132, 119, 194, 129, 163, 112, 30, 45, 129, 163, 112, 30, 45],
      },
      {
        name: "2025年",
        type: "line",
        smooth: true,
        symbol: "circle",
        symbolSize: 8,
        itemStyle: {
          color: "#34C7FE",
          borderColor: "#fff",
          borderWidth: 2,
        },
        lineStyle: {
          normal: {
            color: "#34C7FE",
          },
        },
        areaStyle: {
          normal: {
            color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              {
                offset: 0,
                color: "rgba(52,199,254,0.75)",
              },
              {
                offset: 1,
                color: "rgba(255,255,255,0.3)",
              },
            ]),
          },
        },
        data: [
          40, 162, 109, 164, 139, 193, 162, 130, 80, 139, 193, 162, 130, 80,
        ],
      },
    ],
    dataZoom: [
      {
        type: "slider",
        show: false,
        startValue: data.length - 14, // 展示后14个数据的索引
        endValue: data.length, // 展示全部数据
      },
      {
        type: "inside", // 这个 dataZoom 组件是 inside 型 dataZoom 组件
        start: 0, // 左边在 0% 的位置。
        end: 10, // 右边在 10% 的位置。
      },
    ],
  };

  return option;
}

export function ChartData39() {
  var data = 58;

  const option = {
    title: [
      //     {
      //     text: '开挖',
      //     textStyle: {
      //         color: '#22f5ff',
      //         fontSize: 48,
      //         fontWeight: 'normal',
      //     },
      //     x: 'center',
      //     y: '40%',
      // },
      {
        text: data + "%",
        subtext: "处置率",
        textStyle: {
          fontSize: 48,
          color: "#2DEEF8",

          fontWeight: "normal",
        },
        subtextStyle: {
          fontSize: 24,
          color: "#C1CEDE",
        },
        x: "center",
        y: "30%",
      },
    ],
    backgroundColor: "#0a2b71",
    tooltip: { show: false },
    legend: { show: false },
    polar: {
      radius: ["45%", "55%"],
      center: ["50%", "35%"],
    },
    angleAxis: {
      max: 100,
      show: false,
      startAngle: 90, //开始的角度
      clockwise: false, // 设置角度轴逆时针
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
    },

    series: [
      {
        stack: "round",
        name: "开挖",
        type: "bar",
        silent: true,
        // roundCap: true, //圆角
        barWidth: 28, //大的占比环
        showBackground: true,
        backgroundStyle: {
          color: "rgba(204, 204, 204, 0.7)",
        },
        coordinateSystem: "polar",
        itemStyle: {
          color: {
            type: "linear",
            colorStops: [
              {
                offset: 0,
                color: "#23BFEE",
              },
              {
                offset: 1,
                color: "#CDF0FC",
              },
            ],
            global: false,
          },
        },
        data: [data],
        clockWise: false, //顺时加载
      },

      {
        type: "pie",
        silent: true,
        color: "rgba(68, 98, 133, 1)",
        data: [1],
        label: {
          show: false,
          position: "center",
          //  position: 'outside',
          color: "#fff",
          fontSize: 48,
          formatter: () => `${data}%`,
        },
        radius: ["59%", "59.5%"],
        center: ["50%", "35%"],
      },
      {
        type: "gauge",
        zlevel: 1,
        // z: 198,
        splitNumber: 70,
        radius: "45%",
        center: ["50%", "35%"],
        startAngle: 90,
        endAngle: -269.9999,
        axisLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: false,
        },
        splitLine: {
          show: true,
          length: 6,
          lineStyle: {
            width: 3,
            color: "rgba(45, 238, 248, 0.8)",
          },
        },
        // data: [
        //   {
        //     value: 198,
        //     name: "测已断面",
        //     title: {
        //       // 配置“家居总数”的样式
        //       show: true,
        //       fontSize: 18,
        //       fontWeight: 700,
        //       // fontFamily: fontFamily.fontFamily65W,
        //       color: "rgba(128,255,255,1)",
        //       offsetCenter: [0, "20%"],
        //     },
        //   },
        // ],
        // detail: {
        //   // 调节数字位置
        //   offsetCenter: [-2, -17],
        //   fontSize: 25,
        //   fontWeight: 700,
        //   // fontFamily: fontFamily.fontFamily95W,
        //   color: "rgba(128,255,255,1)",
        // },
        // pointer: {
        //   show: false,
        // },
        // detail: {
        //   show: 0,
        // },
      },
    ],
  };
  return option;
}

export function ChartData40() {
  var data = 56;

  const option = {
    title: [
      //     {
      //     text: '开挖',
      //     textStyle: {
      //         color: '#22f5ff',
      //         fontSize: 48,
      //         fontWeight: 'normal',
      //     },
      //     x: 'center',
      //     y: '40%',
      // },
      {
        text: data + "%",
        subtext: "开挖",
        itemGap: 20, //文案上线间距
        textStyle: {
          fontSize: 48,
          color: "#fff",

          fontWeight: "normal",
        },
        subtextStyle: {
          fontSize: 35,
          color: "#C4C4C4",
        },
        x: "center",
        y: "45%",
      },
    ],
    backgroundColor: "#0a2b71",
    tooltip: { show: false },
    legend: { show: false },
    polar: {
      radius: ["45%", "55%"],
      center: ["50%", "50%"],
    },
    angleAxis: {
      max: 100,
      show: false,
      startAngle: 90, //开始的角度
      clockwise: false, // 设置角度轴逆时针
    },
    radiusAxis: {
      type: "category",
      show: true,
      axisLabel: { show: false },
      axisLine: { show: false },
      axisTick: { show: false },
    },

    series: [
      {
        stack: "round",
        name: "隧道",
        type: "bar",
        silent: true,
        roundCap: true, //圆角
        barWidth: 28, //大的占比环
        showBackground: true,
        backgroundStyle: {
          color:
          //  'rgba(204, 204, 204, 0.2)'
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "rgba(255, 255, 255, 0.2)",
              },
              {
                offset: 0.4,
                color: "rgba(255, 255, 255, 0.4)",
              },
              {
                offset: 0.6,
                color: "rgba(255, 255, 255, 0.6)",
              },
              {
                offset: 0.8,
                color: "rgba(255, 255, 255, 0.7)",
              },
              {
                offset: 1,
                color: "rgba(255, 255, 255, 0.8)",
              },
            ],
            global: false,
          },
        },
        coordinateSystem: "polar",
        itemStyle: {
          color:
          // 'rgba(219, 176, 33, 1)',
          {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#43CBFF",
              },
              {
                offset: 0.35,
                color: "#DBB021",
              },
              {
                offset: 0.7,
                color: "#00BAAD",
              },
              {
                offset: 1,
                color: "#9708CC",
              },
            ],
            global: false,
          },
        },
        data: [data],
        clockWise: false, //顺时加载
      },
      // {
      //     stack: 'round',
      //     z: 11,
      //     type: 'bar',
      //     data: [0.01],
      //     showBackground: false,
      //     coordinateSystem: 'polar',
      //     roundCap: true,
      //     barWidth: 1,
      //     itemStyle: {
      //         color: {
      //             type: 'linear',
      //             x: 0,
      //             y: 0,
      //             x2: 0,
      //             y2: 1,
      //             colorStops: [{
      //                 offset: 0, color: '#43CBFF'
      //             }, {
      //                 offset: 1, color: '#9708CC'
      //             }],
      //             global: false
      //         },
      //         borderColor: '#red',
      //         borderWidth: 2,
      //     },
      // },
      {
        type: "pie",
        silent: true,
        color:
        // 'rgba(87, 151, 203, 0.2)',
        {
          type: "linear",
          x: 0,
          y: 0,
          x2: 0,
          y2: 1,
          colorStops: [
            {
              offset: 0,
              color: "#00FBFF",
            },
            {
              offset: 0.5,
              color: "#44CF7C",
            },
            {
              offset: 1,
              color: "#0496FF",
            },
          ],
          global: false,
        },
        data: [1],
        label: {
          show: false,
          position: "center",
          //  position: 'outside',
          color: "#fff",
          fontSize: 48,
          formatter: () => `${data}%`,
        },
        radius: ["60%", "61%"],
        center: ["50%", "50%"],
      },
    ],
  };
  return option;
}
let Ydata = ["日进水", "日出水"];
let Xdata = [45, 80];
let myColor = ["#015EEA", "#015EEA"].reverse();
export function ChartData25() {
  const opt = {
    backgroundColor: "#0F1F45",
    xAxis: {
      type: "value",
      show: false,
    },
    yAxis: {
      type: "category",
      inverse: true,
      axisLabel: {
        show: true,
        margin: 15,
        textStyle: {
          color: "#fff",
          fontSize: 18,
        },
        // 调整左侧文字的3个属性，缺一不可
        verticalAlign: "bottom",
        align: "top",
        //调整文字上右下左
        padding: [0, 0, 10, 15],
      },
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      data: Ydata,
    },
    series: [
      {
        type: "bar",
        barWidth: 12,
        zlevel: 2,
        barGap: "-100%",
        showBackground: true,
        backgroundStyle: {
          color: "#00315F",
        },
        itemStyle: {
          color: (params) => {
            var num = myColor.length;
            return {
              type: "linear",
              x: 0,
              y: 0,
              x2: 1,
              y2: 1,
              colorStops: [
                {
                  offset: 1,
                  color: "#00C0FA",
                },
                {
                  offset: 0,
                  color: myColor[params.dataIndex % num],
                },
              ],
            };
          },
        },
        label: {
          show: true,
          position: [420, -27],
          fontSize: 14,
          color: "#fff",

          formatter: function (data) {
            return `{c|${data.value}}{d|吨}`;
          },

          rich: {
            c: {
              fontSize: 25, // 单位字号
              color: "#4EFFAE",
              fontFamily: "Bgqc",
              padding: [0, 14, 0, 1],
            },
            d: {
              fontSize: 14, // 单位字号
              color: "#fff",
              padding: [7, 0, 0, 1],
            },
          },
          textStyle: {
            fontSize: 25, // 中间字号
            fontFamily: "Bgqc",
          },
        },
        data: Xdata,
      },
    ],
  };
  return opt;
}

export function ChartData53() {
  var normaldata = [
    {
      nameValue: "业务部门01",
      Attributes: {
        MAINDIMMEMBER_KEYCOLUMN: "业务部门01",
        MAINDIM_KEYCOLUMN: "GLBM",
        C_ZBNAME: "SL",
        DRILL_DOWN: "false",
      },
      emphasis: {
        label: {
          color: "rgba(0,207,255,1.00)",
          show: false,
          position: "right",
          textStyle: {
            fontFamily: "微软雅黑",
            color: "rgba(242,242,242,1.00)",
            fontSize: 12,
          },
        },
      },
      itemStyle: {
        normal: {
          color: "rgba(0,207,255,1.00)",
        },
      },
      label: {
        color: "rgba(0,207,255,1.00)",
        show: false,
        position: "right",
        textStyle: {
          fontFamily: "微软雅黑",
          color: "rgba(242,242,242,1.00)",
          fontSize: 12,
        },
      },
      value: 1115,
    },
    {
      nameValue: "业务部",
      Attributes: {
        MAINDIMMEMBER_KEYCOLUMN: "业务部",
        MAINDIM_KEYCOLUMN: "GLBM",
        C_ZBNAME: "SL",
        DRILL_DOWN: "false",
      },
      emphasis: {
        label: {
          color: "rgba(0,207,255,1.00)",
          show: false,
          position: "right",
          textStyle: {
            fontFamily: "微软雅黑",
            color: "rgba(242,242,242,1.00)",
            fontSize: 12,
          },
        },
      },
      itemStyle: {
        normal: {
          color: "rgba(255,89,89,1.00)",
        },
      },
      label: {
        color: "rgba(0,207,255,1.00)",
        show: false,
        position: "right",
        textStyle: {
          fontFamily: "微软雅黑",
          color: "rgba(242,242,242,1.00)",
          fontSize: 12,
        },
      },
      value: 1113,
    },
    {
      nameValue: "财务部",
      Attributes: {
        MAINDIMMEMBER_KEYCOLUMN: "财务部",
        MAINDIM_KEYCOLUMN: "GLBM",
        C_ZBNAME: "SL",
        DRILL_DOWN: "false",
      },
      emphasis: {
        label: {
          color: "rgba(0,207,255,1.00)",
          show: false,
          position: "right",
          textStyle: {
            fontFamily: "微软雅黑",
            color: "rgba(242,242,242,1.00)",
            fontSize: 12,
          },
        },
      },
      itemStyle: {
        normal: {
          color: "rgba(24,145,254,1.00)",
        },
      },
      label: {
        color: "rgba(0,207,255,1.00)",
        show: false,
        position: "right",
        textStyle: {
          fontFamily: "微软雅黑",
          color: "rgba(242,242,242,1.00)",
          fontSize: 12,
        },
      },
      value: 909,
    },
    {
      nameValue: "研发部",
      Attributes: {
        MAINDIMMEMBER_KEYCOLUMN: "研发部",
        MAINDIM_KEYCOLUMN: "GLBM",
        C_ZBNAME: "SL",
        DRILL_DOWN: "false",
      },
      emphasis: {
        label: {
          color: "rgba(0,207,255,1.00)",
          show: false,
          position: "right",
          textStyle: {
            fontFamily: "微软雅黑",
            color: "rgba(242,242,242,1.00)",
            fontSize: 12,
          },
        },
      },
      itemStyle: {
        normal: {
          color: "rgba(246,207,50,1.00)",
        },
      },
      label: {
        color: "rgba(0,207,255,1.00)",
        show: false,
        position: "right",
        textStyle: {
          fontFamily: "微软雅黑",
          color: "rgba(242,242,242,1.00)",
          fontSize: 12,
        },
      },
      value: 106,
    },
    {
      nameValue: "研发",
      Attributes: {
        MAINDIMMEMBER_KEYCOLUMN: "研发",
        MAINDIM_KEYCOLUMN: "GLBM",
        C_ZBNAME: "SL",
        DRILL_DOWN: "false",
      },
      emphasis: {
        label: {
          color: "rgba(0,207,255,1.00)",
          show: false,
          position: "right",
          textStyle: {
            fontFamily: "微软雅黑",
            color: "rgba(242,242,242,1.00)",
            fontSize: 12,
          },
        },
      },
      itemStyle: {
        normal: {
          color: "rgba(92,249,235,1.00)",
        },
      },
      label: {
        color: "rgba(0,207,255,1.00)",
        show: false,
        position: "right",
        textStyle: {
          fontFamily: "微软雅黑",
          color: "rgba(242,242,242,1.00)",
          fontSize: 12,
        },
      },
      value: 96,
    },
    {
      nameValue: "职能部门01",
      Attributes: {
        MAINDIMMEMBER_KEYCOLUMN: "职能部门01",
        MAINDIM_KEYCOLUMN: "GLBM",
        C_ZBNAME: "SL",
        DRILL_DOWN: "false",
      },
      emphasis: {
        label: {
          color: "rgba(0,207,255,1.00)",
          show: false,
          position: "right",
          textStyle: {
            fontFamily: "微软雅黑",
            color: "rgba(242,242,242,1.00)",
            fontSize: 12,
          },
        },
      },
      itemStyle: {
        normal: {
          color: "rgba(205,86,246,1.00)",
        },
      },
      label: {
        color: "rgba(0,207,255,1.00)",
        show: false,
        position: "right",
        textStyle: {
          fontFamily: "微软雅黑",
          color: "rgba(242,242,242,1.00)",
          fontSize: 12,
        },
      },
      value: 2,
    },
    {
      nameValue: "折旧部门",
      Attributes: {
        MAINDIMMEMBER_KEYCOLUMN: "折旧部门",
        MAINDIM_KEYCOLUMN: "GLBM",
        C_ZBNAME: "SL",
        DRILL_DOWN: "false",
      },
      emphasis: {
        label: {
          color: "rgba(0,207,255,1.00)",
          show: false,
          position: "right",
          textStyle: {
            fontFamily: "微软雅黑",
            color: "rgba(242,242,242,1.00)",
            fontSize: 12,
          },
        },
      },
      itemStyle: {
        normal: {
          color: "rgba(254,143,141,1.00)",
        },
      },
      label: {
        color: "rgba(0,207,255,1.00)",
        show: false,
        position: "right",
        textStyle: {
          fontFamily: "微软雅黑",
          color: "rgba(242,242,242,1.00)",
          fontSize: 12,
        },
      },
      value: 1,
    },
  ];
  var myColor = [
    { color1: "rgba(255, 0, 108, .12)", color2: "rgba(255, 0, 108, 1)" },
    { color1: "rgba(239, 157, 83,.12)", color2: "rgba(239, 157, 83, 1)" },
    { color1: "rgba(237, 223, 67,.12)", color2: "rgba(237, 223, 67, 1)" },
    { color1: "rgba(36, 166, 237,.12)", color2: "rgba(36, 166, 237, 1)" },
  ];
  var valdata = [];
  var titlename = [];
  normaldata.forEach((item, index) => {
    valdata.push(normaldata[0].value + 100);
    titlename.push(item.nameValue);
    var color = new echarts.graphic.LinearGradient(0, 0, 1, 0, [
      {
        offset: 0,
        color: myColor[index < 3 ? index : 3].color1,
      },
      {
        offset: 1,
        color: myColor[index < 3 ? index : 3].color2,
      },
    ]);
    item.itemStyle.normal = {
      barBorderRadius: 30,
      color: color,
    };
  });

  let option = {
    backgroundColor: "#0e2147",
    xAxis: {
      show: false,
    },
    grid: {
      left: 150,
    },
    yAxis: [
      {
        nameLocation: "start",
        data: titlename,
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        inverse: true,
        axisLabel: {
          // margin:80,
          // align:'right',
          color: "rgba(1, 255, 255, 1)",
          formatter: function (value, index) {
            return ["{lg|" + (index + 1) + "}" + "{title|" + value + "} "].join(
              "\n"
            );
          },
          rich: {
            lg: {
              color: "#fff",
              padding: 5,
              // width: 25,
              // align: 'left'
            },
            title: {
              width: 80,
              align: "left",
            },
          },
        },
      },
      {
        show: true,
        inverse: true,
        data: normaldata,
        axisLabel: {
          textStyle: {
            fontSize: 12,
            color: function (value, index) {
              var num = myColor.length;
              return myColor[index < 3 ? index : 3].color2;
            },
          },
        },
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: "条",
        type: "bar",
        yAxisIndex: 0,
        data: normaldata,
        barWidth: 4,
      },
      {
        name: "框",
        type: "bar",
        yAxisIndex: 1,
        barGap: "-100%",
        data: valdata,
        barWidth: 4,
        z: 1,
        itemStyle: {
          normal: {
            color: "rgba(255, 255, 255, .3)",
            barBorderRadius: 4,
          },
        },
      },
    ],
  };

  return option;
}

export const ChartData26 = [
  {
    name: "设计水量",
    sign: 1,
    num: "291536",
    unit: "万/吨",
    text: "WATER",
    color: "#4EFFAE",
  },
  {
    name: "占地面积",
    sign: 2,
    num: "291536",
    unit: "km²",
    text: "WATER",
    color: "#FF844E",
  },
  {
    name: "占地面积",
    sign: 3,
    num: "291536",
    unit: "km²",
    text: "WATER",
    color: "#4EFFAE",
  },
];

export function ChartData29() {
  const opt = {
    backgroundColor: "#0e2147",

    //你的代码
    title: {
      text: "",
    },
    grid: {
      top: 60,
      left: 15,
      right: 25,
      bottom: 10,
      containLabel: true,
    },
    tooltip: {
      // show:false,
      trigger: "axis",
    },
    legend: {
      left: "11%",
      top: "5%",
      textStyle: {
        color: "#fff",
        fontSize: 14,
      },
      //  icon:'rect',
      // orient: 'horizontal',
      dada: ["进水", "出水"],
      itemWidth: 23,
      itemHeight: 0,
    },
    xAxis: {
      type: "category",
      data: ["0时", "2时", "4时", "6时", "8时", "10时", "12时"],
      axisLine: {
        show: false,
      },
      splitLine: {
        show: true,
        lineStyle: {
          color: "rgba(144, 144, 144, 0.5)",
        },
      },

      axisTick: {
        show: true, // 是否显示x轴的刻度
      },
      axisLabel: {
        interval: 0,
        color: "#909090",
        fontSize: 15,
      },
      boundaryGap: false, // true折线图以x轴刻度为中心点  false折线图折线从头开始
    },
    yAxis: {
      type: "value",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      axisLabel: {
        color: "#6292C8",
        fontSize: 14,
        margin: 30,
        formatter: function (value) {
          return value;
        },
      },
      splitLine: {
        show: false,
        lineStyle: {
          type: "dashed",
          //  color: "rgba(60,132,163,0.2)",
        },
      },
    },
    series: [
      {
        name: "出水",
        type: "line",
        smooth: false,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(0, 144, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(12, 32, 53, 1)",
            },
          ]),
        },
        lineStyle: {
          width: 3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(0, 144, 255, 1)",
            },
            {
              offset: 1,
              color: "rgba(12, 32, 53, 1)",
            },
          ]),
        },
        // 设置节点样式
        showSymbol: false,
        symbol: "circle", // 可以选择 circle, diamond, pin 等
        symbolSize: 11.5, // 节点大小
        itemStyle: {
          color: "#fff", // 节点颜色
        },
        data: [13, 16, 23, 25, 17, 11, 10],
      },
      {
        name: "标准",
        type: "line",
        smooth: false,
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(8, 107, 108, 1)",
            },
            {
              offset: 1,
              color: "rgba(1, 23, 46, 1)",
            },
          ]),
        },
        lineStyle: {
          width: 3,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: "rgba(230, 73, 5, 0.49)",
            },
            {
              offset: 1,
              color: "rgba(230, 73, 5, 0.49)",
            },
          ]),
        },
        // 设置节点样式
        showSymbol: false,
        symbol: "circle", // 可以选择 circle, diamond, pin 等
        symbolSize: 10, // 节点大小
        itemStyle: {
          color: "#fff", // 节点颜色
        },
        data: [10, 13, 14, 15, 8, 7, 6],
      },
    ],
  };
  return opt;
}

export function ChartData42() {
  function percentageOperation(percentageString, operation, value) {
    // 将百分比字符串转换为小数

    var decimalValue = parseFloat(percentageString) / 100;

    // 执行加减操作
    if (operation === "add") {
      decimalValue += parseFloat(value) / 100;
    } else if (operation === "subtract") {
      decimalValue -= parseFloat(value) / 100;
    }
    console.log("percentageOperation", decimalValue);
    // 将结果转换回百分比字符串格式
    return (decimalValue * 100).toFixed(2) + "%";
  }
  const chartOption = {
    backgroundColor: "transparent",
    legend: {
      backgroundColor: "transparent",
      data: [
        {
          name: "有产权",
        },
        {
          name: "无产权",
        },
      ],
      bottom: 10,
      itemHeight: 8,
      show: true,
      itemWidth: 8,
      textStyle: {
        fontFamily: "微软雅黑",
        color: "rgba(255,255,255,1.00)",
        fontSize: 14,
        fontStyle: "normal",
        fontWeight: "normal",
      },
      type: "scroll",
    },
    series: [
      {
        startAngle: 90,
        selectedOffset: 8,
        data: [
          {
            zbPercentValue: 0.00980392156862745,
            zbTitle: "MJ",
            name: "有产权",
            Attributes: {
              MAINDIMMEMBER_NAMECOLUMN: "有产权",
              MAINDIMMEMBER_KEYCOLUMN: "有产权",
              MAINDIM_NAMECOLUMN: "CQQK",
              MAINDIM_KEYCOLUMN: "CQQK",
              C_ZBNAME: "MJ",
              DRILL_DOWN: "false",
            },
            itemStyle: {
              normal: {
                color: "rgba(0,207,255,1.00)",
              },
            },
            value: 10,
          },
          {
            zbPercentValue: 0.8921568627450981,
            zbTitle: "MJ",
            name: "无产权",
            Attributes: {
              MAINDIMMEMBER_NAMECOLUMN: "无产权",
              MAINDIMMEMBER_KEYCOLUMN: "无产权",
              MAINDIM_NAMECOLUMN: "CQQK",
              MAINDIM_KEYCOLUMN: "CQQK",
              C_ZBNAME: "MJ",
              DRILL_DOWN: "false",
            },
            itemStyle: {
              normal: {
                color: "rgba(255,89,89,1.00)",
              },
            },
            value: 910,
          },
        ],
        selectedMode: false,
        center: ["50%", "50%"],
        label: {
          normal: {
            show: true,
            textStyle: {
              fontFamily: "微软雅黑",
              color: "rgba(255,255,255,0.70)",
              fontSize: 12,
              fontStyle: "normal",
              fontWeight: "normal",
            },
            position: "outside",
          },
        },
        labelLine: {},
        type: "pie",
        radius: ["46%", "50%"],
      },
    ],
    tooltip: {
      borderColor: "rgba(50,50,50,1.00)",
      backgroundColor: "rgba(50,50,50,1.00)",
      axisPointer: {
        shadowStyle: {
          color: "rgba(0, 0, 0, 0)",
        },
        type: "shadow",
      },
      textStyle: {
        fontFamily: "微软雅黑",
        color: "rgba(242,242,242,1.00)",
        fontSize: 12,
        fontStyle: "normal",
        fontWeight: "normal",
      },
      trigger: "item",
    },
    title: {
      top: 5,
      left: "center",
      show: false,
      textStyle: {
        fontFamily: "微软雅黑",
        color: "rgba(242,242,242,1.00)",
        fontSize: 14,
        fontStyle: "normal",
        fontWeight: "normal",
      },
    },
  };
  var normaldata = chartOption.series[0].data;
  chartOption.backgroundColor = "#0e2147";
  // chartOption.legend.icon = 'circle';
  // chartOption.legend.right = 30;
  chartOption.legend.itemGap = 20;

  chartOption.series[0].roseType = "radius";
  let pie = JSON.parse(JSON.stringify(chartOption.series[0]));
  chartOption.series[0].itemStyle = {
    borderWidth: 2, //边框的宽度
    borderColor: "#03224F", //边框的颜色
  };
  // chartOption.series[0].label.normal.alignTo = 'labelLine';
  chartOption.series[0].labelLine.lineStyle = {
    color: "rgba(255, 255, 255, .3)",
  };

  chartOption.series[0].label.normal.distanceToLabelLine = -100;
  chartOption.series[0].labelLine.length = 40;
  chartOption.series[0].labelLine.length2 = 120;

  chartOption.series[0].label.normal.formatter = function (params) {
    return `{dot|}   ${params.name} ${params.percent}% \n\n {d|${params.value} 间/套}`;
  };
  chartOption.series[0].label.normal.rich = {
    dot: {
      backgroundColor: "auto", // 适应颜色
      width: 0,
      height: 0,
      borderRadius: 3, // 保证是圆角
      // fontSize: 16,
      padding: [3, -3, 3, -3], // 这里就保证是要给宽高6的正方形
    },
    d: {
      color: "rgba(255, 255, 255, 1)",
    },
  };

  pie.data.forEach((item) => {
    console.log("color", item.itemStyle.normal.color);
    item.itemStyle.normal.color = item.itemStyle.normal.color.replace(
      "1.00",
      "0.7"
    );
    console.log("color2", item.itemStyle.normal.color);
  });
  pie.radius = [
    percentageOperation(chartOption.series[0].radius[0], "subtract", "10%"),
    percentageOperation(chartOption.series[0].radius[0], "add", "1%"),
  ];
  pie.zlevel = 1;
  pie.labelLine.show = false;
  pie.label.normal.show = false;
  chartOption.series = [
    chartOption.series[0],
    {
      type: "pie", //最内圆圈
      radius: [
        percentageOperation(chartOption.series[0].radius[0], "subtract", "5%"),
        percentageOperation(chartOption.series[0].radius[0], "subtract", "2%"),
      ],
      center: chartOption.series[0].center,
      hoverAnimation: false,
      clockWise: false,
      tooltip: { show: false },
      itemStyle: {
        normal: {
          color: "rgba(6, 125, 255, .2)",
        },
      },
      label: {
        show: false,
      },
      data: [0],
    },
    {
      type: "pie", //最外圆圈
      radius: [
        percentageOperation(chartOption.series[0].radius[1], "add", "7%"),
        percentageOperation(chartOption.series[0].radius[1], "add", "7.3%"),
      ],
      // radius: ['44%', '50%'],
      center: chartOption.series[0].center,
      // radius: '90%',
      hoverAnimation: false,
      clockWise: false,
      itemStyle: {
        normal: {
          shadowBlur: 1,
          shadowColor: "rgba(15, 79, 150,0.61)",
          color: "rgba(23,138,173,1)",
          // borderColor: '#1f1e26',
          // borderWidth: 5,
        },
      },
      label: {
        show: false,
      },
      data: [0],
      // data: labelData,
    },
    {
      type: "pie", //点
      radius: [
        percentageOperation(chartOption.series[0].radius[1], "add", "7%"),
        percentageOperation(chartOption.series[0].radius[1], "add", "8%"),
      ],
      center: chartOption.series[0].center,
      // radius: '90%',
      hoverAnimation: false,
      clockWise: false,
      color: ["#55c2e200", "rgba(23,138,173,1)", "#ff5a6100", "ff5a6100"],
      label: {
        show: false,
      },
      data: [40, 10, 240, 30],
      // data: [30,30,30,30,30,30],
    },
    {
      type: "pie", //点
      radius: [
        percentageOperation(chartOption.series[0].radius[1], "add", "7%"),
        percentageOperation(chartOption.series[0].radius[1], "add", "8%"),
      ],
      center: chartOption.series[0].center,
      // radius: '90%',
      hoverAnimation: false,
      clockWise: false,
      color: ["#55c2e200", "rgba(23,138,173,1)", "#ff5a6100", "ff5a6100"],
      label: {
        show: false,
      },
      data: [150, 15, 240, 30],
      // data: [30,30,30,30,30,30],
    },
    {
      type: "pie", //点
      radius: [
        percentageOperation(chartOption.series[0].radius[1], "add", "7%"),
        percentageOperation(chartOption.series[0].radius[1], "add", "8%"),
      ],
      center: chartOption.series[0].center,
      // radius: '90%',
      hoverAnimation: false,
      clockWise: false,
      color: ["#55c2e200", "rgba(23,138,173,1)", "#ff5a6100", "ff5a6100"],
      label: {
        show: false,
      },
      data: [280, 15, 130, 30],
      // data: [30,30,30,30,30,30],
    },
    {
      type: "pie", //点
      radius: [
        percentageOperation(chartOption.series[0].radius[1], "add", "7%"),
        percentageOperation(chartOption.series[0].radius[1], "add", "8%"),
      ],
      center: chartOption.series[0].center,
      // radius: '90%',
      hoverAnimation: false,
      clockWise: false,
      color: ["#55c2e200", "rgba(23,138,173,1)", "#ff5a6100", "ff5a6100"],
      label: {
        show: false,
      },
      data: [910, 40, 130, 30],
      // data: [30,30,30,30,30,30],
    },
  ];
  const option = chartOption;
  return option;
}

export function ChartData43() {
  const option = {
    // 环形图中间默认显示文字
    title: {
      show: true,
      text: "公告总数",
      x: "26%", //水平安放位置，默认为'left'，可选为：'center' | 'left' | 'right' | {number}（x坐标，单位px）
      y: "center",
    },
    legend: {
      orient: "vertical",
      left: "80%",
      top: "center",
      icon: "circle",
      itemGap: 20, // 设置图例项之间的间距
    },
    series: [
      {
        z: 2,
        name: "环形图",
        type: "pie",
        radius: ["35%", "50%"],
        center: ["30%", "50%"],
        avoidLabelOverlap: false,
        labelLine: {
          show: false,
        },
        label: {
          show: true,
          position: "inside",
          color: "#FFF",
          formatter: function (params) {
            return `${params.percent.toFixed(0)}%`; // 显示百分比，保留一位小数
          },
        },
        data: [
          { value: 1048, name: "Search Engine" },
          { value: 735, name: "Direct" },
          { value: 580, name: "Email" },
          { value: 484, name: "Union Ads" },
          { value: 300, name: "Video Ads" },
        ],
      },
      {
        name: "中间背景圆",
        type: "pie",
        radius: ["0%", "32%"],
        center: ["30%", "50%"],
        hoverAnimation: false,
        itemStyle: {
          color: "#EEF2F6",
        },
        z: 1,
        labelLine: {
          show: false,
        },
        data: [100],
      },
    ],
  };
  return option;
}
export function ChartData24() {
  let result = [
    {
      name: "测试1",
      value: 2,
    },
    {
      name: "测试2",
      value: 4,
    },
    {
      name: "测试3",
      value: 6,
    },
  ];

  const opt = {
    backgroundColor: "#0e2147",

    tooltip: {
      show: true,
      trigger: "item",
      padding: [8, 15],
      backgroundColor: "rgba(23, 51, 67,1)",
      textStyle: {
        color: "rgba(255, 255, 255, 1)",
      },
    },
    legend: {
      show: false,
    },
    grid: {
      left: "40",
      right: "40",
      top: "12",
      bottom: "0",
    },
    xAxis: [
      {
        splitLine: {
          show: false,
        },
        type: "value",
        show: false,
      },
    ],
    yAxis: [
      {
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
        },
        type: "category",
        axisTick: {
          show: false,
        },
        inverse: true,
        data: result.map((item) => item.name),
        axisLabel: {
          show: false,
          color: "#fff",
          fontSize: 14,
          margin: 10,
          // formatter: (name, index) => {
          //     const id = index + 1;
          //     if (id === 1) {
          //         return `{icon1|${id}}`;
          //      } else {
          //         return `{icon2|${id}}`;
          //      }
          // },
          // rich: {
          // 	icon1: {
          // 		width: 54,
          // 		height: 54,
          // 		padding: [5, 0, 2, 0],
          // 		align: 'center',
          // 		backgroundColor: {
          // 			image: icon1
          // 		},
          // 		color: '#ffffff',
          // 		fontSize: 20,
          // 	},
          // 	icon2: {
          // 		width: 54,
          // 		height: 54,
          // 		padding: [5, 0, 2, 0],
          // 		align: 'center',
          // 		backgroundColor: {
          // 			image: icon2
          // 		},
          // 		color: '#ffffff',
          // 		fontSize: 20,
          // 	}
          // },
        },
      },
      {
        type: "category",
        inverse: true,
        axisTick: "none",
        axisLine: "none",
        show: true,
        axisLabel: {
          verticalAlign: "bottom",
          align: "right",
          margin: 0,
          // 数字
          padding: [0, 0, 5, 0],
          textStyle: {
            color: "#fff",
            fontSize: 16,
            fontWeight: 900,
          },
          formatter: function (value) {
            return value;
          },
        },
        data: result.map((item) => item.value),
      },
    ],
    series: [
      {
        name: "",
        type: "bar",
        barWidth: 3, // 柱子宽度
        MaxSize: 100,
        showBackground: true,
        margin: 40,
        barBorderRadius: [30, 0, 0, 30],
        backgroundStyle: {
          color: "rgb(33,66,88)",
        },
        label: {
          show: true,
          offset: [5, -13],
          color: "#fff",
          fontWeight: 500,
          padding: [0, 0, -30, 0],

          fontSize: 14,
          position: "left",
          align: "left",
          formatter: function (params) {
            return params.data.name; //params.dataIndex + 1 + params.data.name
          },
        },
        data: result.map((item, index) => {
          return {
            name: item.name,
            value: item.value,
            itemStyle: {
              barBorderRadius: [30, 0, 0, 30],
              color: {
                type: "linear",
                x: 0,
                y: 0,
                x2: 1,
                y2: 1,
                colorStops: [
                  {
                    offset: 0,
                    color: "#00000000",
                  },
                  {
                    offset: 1,
                    color:
                      item.value > 100
                        ? "rgba(254, 155, 35, 1)"
                        : item.value > 1000
                          ? "rgba(255, 98, 97, 1)"
                          : "rgba(255, 237, 201, 1)",
                  },
                ],
              },
            },
          };
        }),
      },
      {
        name: "外圆",
        type: "scatter",
        emphasis: {
          scale: false,
        },
        symbol: "rect",
        symbolSize: [3, 3], // 进度条白点
        itemStyle: {
          barBorderRadius: [30, 0, 0, 30],
          color: "#FFF",
          shadowColor: "rgba(255, 255, 255, 0.5)",
          shadowBlur: 5,
          borderWidth: 1,
          opacity: 1,
        },
        z: 2,
        data: result,
        animationDelay: 500,
      },
    ],
  };
  return opt;
}
export function ChartData44() {
  const payload = {
    id: "",
    data: {
      title: ["生态指数"],
      unit: ["%"],
      x: [
        "放炮员",
        "安全员",
        "瓦检员",
        "采集司机",
        "电钳工",
        "二级主提司机",
        "主提司机",
        "电工",
      ],
      data1: [34, 90, 60, 20, 80, 60, 40, 34],
    },
  };

  const unit = payload.data.unit || [];
  const x = payload.data.x || [];
  const data1 = payload.data.data1 || [];
  const title = payload.data.title || [];

  const option = {
    backgroundColor: "#092332",

    grid: {
      top: 10,
      left: 10,
      right: 40,
      bottom: 10,
      containLabel: true,
    },
    tooltip: {
      trigger: "axis",
      backgroundColor: "rgba(9, 30, 60, 0.6)",
      extraCssText: "box-shadow: 0 0 8px rgba(0, 128, 255, 0.27) inset;",
      borderWidth: 0,
      confine: false,
      appendToBody: true,
      textStyle: {
        color: "#fff",
        fontSize: 10,
      },
      axisPointer: {
        type: "shadow",
      },
      shadowStyle: {
        color: "rgba(157, 168, 245, 0.1)",
      },
      formatter: (data) => {
        var tip = '<h5 class="echarts-tip-h5">' + data[0].name + "</h5>";
        data.forEach((item) => {
          let unit = "人";
          if (item.seriesType === "bar") {
            tip += '<div class="right">' + item.value + unit + "</div>";
            tip += "</div>";
          }
        });
        return tip;
      },
    },
    xAxis: {
      type: "value",
      axisLine: {
        show: true,
        lineStyle: {
          color: "#4176a3",
          width: 1,
        },
      },
      splitLine: { show: false },
      axisTick: { show: true },
      axisLabel: {
        textStyle: {
          color: "#fff",
          fontSize: 12,
        },
      },
    },
    yAxis: [
      {
        type: "category",
        data: x,
        axisLine: {
          show: true,
          lineStyle: {
            color: "#4176a3",
            width: 2,
          },
        },
        axisTick: {
          show: false,
          alignWithLabel: true,
        },
        axisLabel: {
          margin: 15,
          fontSize: 12,
          color: "#ADD6FF",
        },
        splitLine: {
          show: false,
        },
      },
    ],
    series: [
      {
        name: title[0],
        type: "bar",
        barWidth: 20,
        showBackground: false,
        backgroundStyle: {
          color: "rgb(209, 21, 21)",
        },
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: "#6ED0FF" },
            { offset: 1, color: "#35AFFF" },
          ]),
        },
        data: data1,
        z: 0,
        zlevel: 0,
      },
      // {
      //     name: title[0],
      //     type: 'bar',
      //     barWidth: 20,
      //     showBackground: false, // 去掉背景
      //     itemStyle: {
      //         color: '#40B5FF',
      //         emphasis: {
      //             color: '#36FFDC', // 鼠标移入时变成绿色
      //         },
      //     },
      //     data: payload.data.data1,
      //     z: 0,
      //     zlevel: 0,
      // },
      {
        type: "pictorialBar",
        itemStyle: {
          color: "#021C46",
        },
        symbolRepeat: true,
        symbolMargin: 3,
        symbol: "rect",
        symbolSize: [4, 20],
        data: data1,
        label: {
          show: true,
          position: "right",
          fontSize: 14,
          color: "#fff",
          formatter: (params) => params.data + "人",
        },
      },
    ],
  };
  return option;
}

export function ChartData45() {
  const option = {
    tooltip: {
      trigger: "axis",
      axisPointer: {
        // 坐标轴指示器，坐标轴触发有效
        type: "shadow", // 默认为直线，可选为：'line' | 'shadow'
      },
    },
    legend: {
      show: true,
      // orient: 'vertical',
      icon: "circle", //方形
      itemWidth: 12,
      itemHeight: 12,
      bottom: 0,
      textStyle: {
        color: "#4E5969",
      },
    },
    xAxis: {
      type: "category",
      axisTick: {
        show: false,
      },
      axisLabel: {
        textStyle: {
          color: "#4E5969",
        },
      },
      axisLine: {
        lineStyle: {
          color: "#EAEBF0",
        },
      },
      data: ["Mon", "Tue", "Wed", "Thu", "Fri", "Sat", "Sun"],
    },
    yAxis: {
      name: "单位/个",
      nameTextStyle: {
        // align: 'right',
        color: "#86909C", // 设置颜色为红色
        fontSize: 12, // 可选，设置字体大小
      },
      type: "value",
      axisLabel: {
        textStyle: {
          color: "#4E5969",
        },
      },

      // show: false
    },
    series: [
      {
        name: "项目数量",
        data: [120, 200, 150, 80, 70, 110, 130],
        type: "bar",
        stack: "one",
        color: "#4080FF",
        itemStyle: {
          // borderWidth: 1,
          borderColor: "rgba(255, 255, 255, 1)", //同背景色一样
          barBorderRadius: 8,
        },
        barWidth: "14",
        // barCategoryGap: '90%'
        // emphasis: {
        //   itemStyle: {
        //     borderColor: 'rgba(255, 255, 255, 1)'
        //   }
        // }
      },
      {
        name: "进行中",
        data: [120, 30, 150, 80, 70, 110, 130],
        type: "bar",
        stack: "one", //堆叠
        color: "#94BFFF",
        itemStyle: {
          borderWidth: 1,
          borderColor: "rgba(255, 255, 255, 1)", //同背景色一样
          barBorderRadius: 8,
        },
        // barWidth: '16',
        // barCategoryGap: '90%'
        // emphasis: {
        //   itemStyle: {
        //     borderColor: 'rgba(255, 255, 255, 1)'
        //   }
        // }
      },
      {
        name: "延期",
        data: [120, 30, 150, 80, 70, 110, 130],
        type: "bar",
        stack: "one", //堆叠
        // barWidth: 8,
        color: "#FBACA3",
        itemStyle: {
          borderWidth: 1,
          borderColor: "rgba(255, 255, 255, 1)", //同背景色一样
          barBorderRadius: 8,
        },
        barWidth: "12",
        // barCategoryGap: '90%'
        // emphasis: {
        //   itemStyle: {
        //     borderColor: 'rgba(255, 255, 255, 1)'
        //   }
        // }
      },
      {
        name: "已结项",
        data: [120, 30, 150, 80, 70, 110, 130],
        type: "bar",
        stack: "one", //堆叠
        color: "#7AD2DE",
        itemStyle: {
          borderWidth: 1,
          borderColor: "rgba(255, 255, 255, 1)", //同背景色一样
          barBorderRadius: 8,
        },
        // barWidth: '12',
        // barCategoryGap: '90%'
        // emphasis: {
        //   itemStyle: {
        //     borderColor: 'rgba(255, 255, 255, 1)'
        //   }
        // }
      },
    ],
  };
  return option;
}

export const ChartData46 = {
  // tooltip: {
  //   trigger: 'axis',
  //   axisPointer: {
  //     type: 'shadow'
  //   }
  // },
  grid: {
    left: "2%",
    right: "4%",
    bottom: "3%",
    top: "3%",
    containLabel: true,
  },
  xAxis: {
    type: "value",
    splitLine: {
      // show:false, // 不显示网格线
      lineStyle: {
        type: "dashed",
        color: "#E5E5E5",
      },
    },
    axisLabel: {
      // show: false, // 不显示坐标轴上的文字
      textStyle: {
        color: "#424242",
      },
    },
    // boundaryGap: [0, 0.01],
    // show:false, // 不显示坐标轴线、坐标轴刻度线和坐标轴上的文字
    axisTick: {
      show: false, // 不显示坐标轴刻度线
    },
    axisLine: {
      show: false, // 不显示坐标轴线
    },
  },
  yAxis: {
    name: "单位/个",
    nameTextStyle: {
      align: "right",
      color: "#86909C", // 设置颜色为红色
      fontSize: 12, // 可选，设置字体大小
    },
    nameLocation: "end",
    // inverse: true,
    type: "category",
    data: ["Brazil", "Indonesia", "USA", "India", "China", "World"],
    axisLabel: {
      margin: 6,
      // align: 'left',
      // verticalAlign: 'bottom',
      // lineHeight: 30,
      fontSize: 12,
      textStyle: {
        color: "#424242",
      },
      rich: {
        icon: {
          backgroundColor: {
            image:
              "", // 替换为你的图标路径
          },
          width: 20, // 图标宽度
          height: 20, // 图标高度
          align: "center",
          valign: "middle",
        },
        textStyle: {
          fontSize: 12,
          color: "#333",
        },
      },
      formatter: function (params) {
        return params + " " + "{icon| }"; // 在标签前添加图标占位符
      },
    },
    axisLine: {
      lineStyle: {
        type: "dashed",
        color: "#E5E5E5", // 设置 y 轴线的颜色为红色
      },
    },
    axisTick: {
      show: false,
    },
  },
  series: [
    {
      // name: '2011',
      type: "bar",
      data: [18203, 23489, 29034, 104970, 131744, 630230],
      itemStyle: {
        normal: {
          color: "#7AD2DE",
          borderRadius: 8,
        },
      },
      barWidth: "8",
    },
  ],
};

export function ChartData47() {
  let information = {
    colorArrays: [],
    legend: ["除磁机1", "除磁机2", "除磁机3", "除磁机4", "除磁机5", "除磁机6"],
    data: [8.82, 8.41, 7.86, 7.05, 6.84, 6.39],
  };
  const option = {
    backgroundColor: "#021032",
    tooltip: {
      show: true,
      trigger: "axis",
      formatter: "{b}:{c}kw",
      backgroundColor: "rgba(9,40,84,0.8)",
      borderColor: "rgba(9,40,84,0.8)",
      textStyle: {
        fontSize: 20,
        color: "#fff",
      },
      axisPointer: {
        type: "shadow",
      },
    },
    grid: {
      left: "3%",
      top: "3%",
      right: "3%",
      bottom: "8%",
      containLabel: true,
    },
    xAxis: {
      type: "value",
      show: false,
      position: "top",
      axisTick: {
        show: false,
      },
      axisLine: {
        show: false,
      },
      splitLine: {
        show: false,
      },
    },
    yAxis: {
      type: "category",
      name: "",
      nameLocation: "start",
      nameTextStyle: {
        color: "#fff",
        fontSize: 20,
        padding: [0, 0, 0, 140],
      },
      axisTick: {
        show: false,
        alignWithLabel: false,
        length: 5,
      },
      splitLine: {
        //网格线
        show: false,
      },
      inverse: "true", //排序
      axisLine: {
        show: true,
        lineStyle: {
          color: "rgba(180, 228, 255, 0.3)",
          width: 2,
        },
      },

      axisLabel: {
        color: "#fff",
        margin: 2,
        fontSize: 20,
      },
      data: information.legend,
    },
    series: [
      {
        name: "能耗值",
        type: "bar",
        stack: "排名",
        label: {
          show: true,
          position: "right",
          formatter: "{c}kw",
          color: "#fff", //color of value
          fontSize: 20,
        },
        itemStyle: {
          show: true,
          color: new echarts.graphic.LinearGradient(
            0,
            0,
            1,
            0,
            [
              { offset: 0, color: "rgba(24, 144, 255, 0.35)" },
              { offset: 1, color: "#1890FF" },
            ],
            false
          ),
          borderWidth: 0,
          borderColor: "#333",
        },
        emphasis: {
          // 解决渐变色hover变色问题
          disabled: true,
        },
        showBackground: true,
        backgroundStyle: {
          color: "rgba(180, 180, 180, 0.2)",
        },
        data: information.data,
      },
    ],
  };
  return option;
}

export function ChartData48() {
  const option = {
    legend: {
      left: '5%',
      icon: 'roundRect',
      itemHeight: 9, //修改icon图形大小
      // icon: "path://M512 881.777778 512 881.777778C716.222629 881.777778 881.777778 716.222629 881.777778 512 881.777778 307.777371 716.222629 142.222222 512 142.222222 307.777373 142.222222 142.222222 307.777371 142.222222 512 142.222222 716.222629 307.777373 881.777778 512 881.777778L512 881.777778ZM512 1024 512 1024C229.230208 1024 0 794.769789 0 512 0 229.230211 229.230208 0 512 0 794.769789 0 1024 229.230211 1024 512 1024 794.769789 794.769789 1024 512 1024L512 1024Z",
      textStyle: {
        color: "white", // 文字的颜色。 
      }
    },
    backgroundColor: '#0C1954',
    /**区域位置*/
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    tooltip: {
      trigger: 'axis',
    },
    xAxis: {
      type: 'category',
      data: ['哈尔滨', '黑河', '牡丹江'],
      axisLine: {
        show: true,
        lineStyle: {
          color: "#BAE7FF",
          width: 1,
          type: "solid"
        }
      },
      axisTick: {
        show: false
      },

    },
    yAxis: {
      axisLine: {
        show: true,
        lineStyle: {
          color: "#BAE7FF",
          width: 1,
          type: "solid",
        },

      },
      splitLine: {
        lineStyle: {
          color: 'rgba(186, 231, 255, 0.2)',
          type: "dashed"
        }
      },
      axisLabel: {
        show: true,
        textStyle: {
          color: 'white', //更改坐标轴文字颜色
        }
      },
      axisTick: {
        show: false
      }
    },
    series: [{
      name: '数(人次)',
      type: 'pictorialBar',
      barCategoryGap: '40%',
      symbol: 'triangle',
      barWidth: '100%',
      symbol: 'path://M0,10 L10,10 C5.5,10 5.5,5 5,0 C4.5,5 4.5,10 0,10 z',
      itemStyle: {
        normal: {
          opacity: 0.8,
          // color:'RGBA(133, 255, 105, 1)',
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [{
            offset: 0,
            color: "RGBA(0, 85, 255, 0)" // 0% 处的颜色
          }, {
            offset: 0.6,
            color: "RGBA(0, 85, 255, 0.88)" // 60% 处的颜色
          }, {
            offset: 1,
            color: "RGBA(21, 142, 255, 0.88)" // 100% 处的颜色
          }], false),
          borderColor: '#15B1FF', // 边框颜色
          borderWidth: 2,// 边框宽度
          borderRadius: [100, 100],
        },
        emphasis: {
          opacity: 1
        }
      },
      data: [123, 100, 125],
      z: 10
    }]
  };
  return option;
}

export function ChartData50() {
  let data = [
    {
      KM: "异常1",
      data1: 90,
      data2: 10,
      data3: 8,
    },
    {
      KM: "异常2",
      data1: 90,
      data2: 10,
      data3: 8,
    },
    {
      KM: "异常3",
      data1: 90,
      data2: 10,
      data3: 8,
    },
    {
      KM: "异常4",
      data1: 90,
      data2: 10,
      data3: 8,
    },
    {
      KM: "异常5",
      data1: 90,
      data2: 10,
      data3: 8,
    },
    {
      KM: "异常6",
      data1: 90,
      data2: 10,
      data3: 8,
    },
  ];

  let xdata = new Array();
  let y1data = new Array();
  let y2data = new Array();
  for (let i = 0; i < data.length; i++) {
    xdata.push(data[i].KM);
    y1data.push(data[i].data1);
    y2data.push({
      value: data[i].data2,
      exdata: {
        y1: data[i].data1,
        y2: data[i].data2,
      },
    });
  }

  var option = {
    backgroundColor: "#242325",
    tooltip: {
      trigger: "axis", // 提示框触发方式
    },
    grid: {
      borderWidth: 0,
      top: 0,
      right: 40,
      bottom: 20,
      left: 128,
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      show: false,
      icon: "rect",
      right: "center",
      top: "10",
      itemGap: 200,
      textStyle: {
        color: "#90979c",
      },
    },
    calculable: true,
    xAxis: [
      {
        type: "value",
        trigger: "axis",
        axisLine: {
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        splitLine: {
          show: false,
        },
        axisTick: {
          show: false,
        },
        splitArea: {
          show: false,
        },
        axisLabel: {
          interval: 0,
          show: false,
        },
      },
    ],
    yAxis: [
      {
        type: "category",
        inverse: true,
        splitLine: {
          show: false,
        },
        axisLine: {
          show: false,
          lineStyle: {
            color: "#fff",
          },
        },
        axisTick: {
          show: false,
        },
        axisLabel: {
          show: true,
          interval: 0,
          color: "#fff",
          fontSize: 14,
        },
        splitArea: {
          show: false,
        },
        data: xdata,
      },
    ],
    series: [
      {
        name: "正常",
        type: "bar",
        stack: "总量",
        barMaxWidth: 12,
        barGap: "10%",
        itemStyle: {
          borderRadius: [12, 0, 0, 12],
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#26EDFF",
            },
            {
              offset: 1,
              color: "#26EDFF",
            },
          ]),
        },
        data: y1data,
        z: 11,
      },
      {
        name: "严重滞后",
        type: "bar",
        stack: "总量",
        itemStyle: {
          borderRadius: [0, 12, 12, 0],
          color: new echarts.graphic.LinearGradient(0, 0, 1, 0, [
            {
              offset: 0,
              color: "#FFDF52",
            },
            {
              offset: 1,
              color: "#FFDF52",
            },
          ]),
        },
        data: y2data,
        z: 13,
        label: {
          show: true,
          position: "right",
          color: "#fff",
          align: "right",
          offset: [-8, 16],
          formatter: function (params) {
            let y1 = params.data.exdata.y1;
            let y2 = params.data.exdata.y2;
            let y3 = params.data.exdata.y3;
            return `{a|正常 ${y1}%}  {b|异常 ${y2}%}`;
          },
          rich: {
            a: {
              fontSize: 10,
              color: "rgb(6, 239, 246)",
            },
            b: {
              fontSize: 10,
              color: "rgb(238, 236, 10)",
            },
          },
        },
      },
    ],
  };

  return option;
}

import img from '@/assets/imgs/27.png'
export const ChartData27 = [
  {
    name: '监控区域1',
    time: '2014-9-12 11：:30：:00',
    sign: 1,
    color: '#048BF8',
    url: img
  },
  {
    name: '监控区域2',
    time: '2014-9-12 11：:30：:00',
    sign: 2,
    color: '##00FFF7',
    url: img
  }
]

export function ChartData51() {
  const xAxisData = ["第一列", "第二列", "第三列", "第四列"]
const seriesData = [{
   measureUnit: "吨", value: 500
}, {
   measureUnit: "吨", value: 800
}, { measureUnit: "吨", value: 400 }, { measureUnit: "吨", value: 300 }]


let maxAmount = 0;
// let maxValueArr = [];
seriesData.map((item) => {
   item.value > maxAmount
      ? (maxAmount = item.value)
      : (maxAmount = maxAmount);
});

let maxValArr = new Array(seriesData.length).fill(maxAmount);


const option = {
   //你的代码
   backgroundColor: "#08244d",
   legend: {
      show: false,
      icon: "rect",
      textStyle: {
         color: "#93B9FF",
      },
   },



   grid: {

      containLabel: true,
   },
   xAxis: {
      type: "category",
      axisLabel: {
         fontSize: 11,
         color: "#93B9FF",
         interval: 0,

      },
      axisLine: {
         show: true,
         lineStyle: {
            width: 1,
            color: "#305B9A",
         },
      },
      data: xAxisData,
   },
   yAxis: {
      type: "value",
      axisLabel: {
         fontSize: 11,
         color: "#93B9FF",
      },
      axisLine: {
         show: true,
         lineStyle: {
            color: "#305B9A",
         },
      },
      splitLine: {
         lineStyle: {
            color: "#0F2E60",
         },
      },
   },
   series: [
      {
         name: "全量背景图",
         type: "bar",
         barGap: "-100%",
         data: maxValArr,
         barWidth: 30,
         itemStyle: {
            normal: {
               color: "rgba(63, 169, 245, 0.2)",
            },
         },
         z: 0,
      },
      {
         type: "pictorialBar",
         name: "渐变背景",
         barWidth: 14,
         symbol: "rect",
         symbolSize: "100%",
         symbolPosition: "start",
         symbolOffset: [0, 0],
         label: {
            normal: {
               show: true,
               position: "top",

               formatter: (params) => {
                  return [
                     ...Object.values(seriesData[params.dataIndex]),
                  ].join("\n");
               },
               fontSize: 12,
               lineHeight: 16,
               color: "#93B9FF",
            },
         },
         itemStyle: {
            normal: {
               color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                     offset: 0,
                     color: "rgba(221, 255, 252, 1)",
                  },
                  {
                     offset: 0.1,
                     color: "rgba(8, 239, 222, 1)",
                  },
                  {
                     offset: 1,
                     color: "rgba(0, 128, 167, 0.20)",
                  },
               ]),
            },
         },
         z: 1,
         zlevel: 0,
         data: seriesData.map((item) => {
            return item.value;
         }),
      },
      {
         type: "pictorialBar",
         name: "块状切片",
         itemStyle: {
            normal: {
               color: "#011140",
            },
         },
         barWidth: 14,
         symbolRepeat: 28,
         symbol: "rect",
         symbolClip: true,
         symbolSize: [14, 2],
         symbolPosition: "start",
         symbolOffset: [0, 0],
         data: seriesData.map((item) => {
            return item.value;
         }),
         z: 2,
         zlevel: 0,
      },
   ],

};
return option
}

export function ChartData52() {
  var data = 56;

const option = {
    title: [
        //     {
        //     text: '开挖',
        //     textStyle: {
        //         color: '#22f5ff',
        //         fontSize: 48,
        //         fontWeight: 'normal',
        //     },
        //     x: 'center',
        //     y: '40%',
        // },
        {
            text: data + '%',
            subtext: '开挖',
            itemGap:20, //文案上线间距
            textStyle: {
                fontSize: 48,
                color: "#fff",

                fontWeight: 'normal',
            },
            subtextStyle: {
                fontSize: 35,
                color: '#C4C4C4'
            },
            x: 'center',
            y: '45%',
        }
    ],
    backgroundColor: '#0a2b71',
    tooltip: { show: false },
    legend: { show: false },
    polar: {
        radius: ['45%', '55%'],
        center: ['50%', '50%'],
    },
    angleAxis: {
        max: 100,
        show: false,
        startAngle: 90, //开始的角度  
        clockwise: false // 设置角度轴逆时针
    },
    radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: { show: false },
        axisLine: { show: false },
        axisTick: { show: false },
    },

    series: [
        {
            stack: 'round',
            name: '隧道',
            type: 'bar',
            silent: true,
            roundCap: true, //圆角
            barWidth: 28, //大的占比环
            showBackground: true,
            backgroundStyle: {
                color:
                //  'rgba(204, 204, 204, 0.2)'
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0, color: 'rgba(255, 255, 255, 0.2)'
                        },
                        {
                            offset: 0.4, color: 'rgba(255, 255, 255, 0.4)'
                        },
                        {
                            offset: 0.6, color: 'rgba(255, 255, 255, 0.6)'
                        },
                        {
                            offset: 0.8, color: 'rgba(255, 255, 255, 0.7)'
                        },
                        {
                            offset: 1, color: 'rgba(255, 255, 255, 0.8)'
                        }],
                    global: false
                }
            },
            coordinateSystem: 'polar',
            itemStyle: {
                color:
                // 'rgba(219, 176, 33, 1)',
                {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                            offset: 0, color: '#43CBFF'
                        },
                        {
                            offset: 0.35, color: '#DBB021'
                        },
                        {
                            offset: 0.7, color: '#00BAAD'
                        },
                        {
                            offset: 1, color: '#9708CC'
                        }],
                    global: false
                }
            },
            data: [data],
            clockWise: false, //顺时加载
        },
        // {
        //     stack: 'round',
        //     z: 11,
        //     type: 'bar',
        //     data: [0.01],
        //     showBackground: false,
        //     coordinateSystem: 'polar',
        //     roundCap: true,
        //     barWidth: 1,
        //     itemStyle: {
        //         color: {
        //             type: 'linear',
        //             x: 0,
        //             y: 0,
        //             x2: 0,
        //             y2: 1,
        //             colorStops: [{
        //                 offset: 0, color: '#43CBFF'
        //             }, {
        //                 offset: 1, color: '#9708CC'
        //             }],
        //             global: false
        //         },
        //         borderColor: '#red',
        //         borderWidth: 2,
        //     },
        // },
        {
            type: 'pie',
            silent: true,
            color: 
            // 'rgba(87, 151, 203, 0.2)',
            {
                    type: 'linear',
                    x: 0,
                    y: 0,
                    x2: 0,
                    y2: 1,
                    colorStops: [
                        {
                        offset: 0, color: '#00FBFF'
                    }, 
                       {
                        offset: 0.5, color: '#44CF7C'
                    }, 
                    {
                        offset: 1, color: '#0496FF'
                    }
                    ],
                    global: false
                },
            data: [1],
            label: {
                show: false,
                position: 'center',
                //  position: 'outside', 
                color: '#fff',
                fontSize: 48,
                formatter: () => `${data}%`,

            },
            radius: ['60%', '61%'],
            center: ['50%', '50%'],

        },
    ],
};
return option
}

export function ChartData30() {
  var dataList = [13, 21, 39, 14, 22];
  var nameList = ["货船", "杂船", "渔船", "集装箱船", "其他"];
  var colorList = ["#7b55d8", "#366ccc", "#46b1ce", "#6fd8c9", "#efc97b"];
  var lengthList = [];
  nameList.forEach(function (item) {
     lengthList.push({ "name": (item).toString(), "icon": "circle" });
  });
  var totalNum = dataList.reduce((prev, curr) => prev + curr);
  var seriesList = [];
  var valList = [];
  dataList.forEach(function (item, index) {
     var obj = {
        value: Math.floor(((item / totalNum * 10000) / 10000) * 100),
        value2: item
     };
     if (index == dataList.length - 1) {
        var total = valList.reduce((prev, curr) => prev + curr);
        obj.value = Number((100 - total).toFixed(2));
        valList.push(obj.value);
     } else {
        valList.push(obj.value);
     }
     seriesList.push({
        name: nameList[index],
        type: 'bar',
        data: [obj],
        stack: 'one',
        coordinateSystem: 'polar',
        roundCap: true,
        zlevel: 20,
        itemStyle: {
           normal: {
              color: {
                 type: 'linear',
                 x: 0,
                 y: 0,
                 x2: 1,
                 y2: 1,
                 colorStops: [
                    { offset: 0, color: colorList[index] },
                    { offset: 1, color: '#ffffff' }
                 ]
              },
              
           }
        },
        emphasis: {
           itemStyle: {
              
              shadowBlur: 10,
              shadowColor: "rgba(0, 0, 0, 0.5)",
              
           }
        }
     });
  });
  var center = ['50%', '36%'];
  var radius1 = ['44%', '70%'];
  var radius2 = ['0%', '38%'];
  var titleX = '48%';
  var titleY = '30%';
  var titleSize = 28;
  var legendBottom = "8%";
  seriesList.push({
     name: '外层背景',
     type: 'pie',
     radius: radius2,
     silent: true,
     center: center,
     itemStyle: {
        normal: {
           opacity: 1,
           color: "#ffffff",
        }
     },
     label: {
        normal: {
           show: false,
        },
     },
     data: [{
        value: 0,
        name: '外层背景'
     }]
  });
  const option = {
     tooltip: {
        trigger: 'item',
        formatter: function (params) {
           return params.seriesName + ' <br/> ' + params.marker + params.data.value2 + " <br/>  " + params.data.value + "%";
        }
     },
     title: [{
        text: '{num|' + totalNum + '}',
        x: titleX,
        y: titleY,
        textAlign: 'center',
        textStyle: {
           rich: {
              num: {
                 fontSize: titleSize,
                 fontWeight: 'bold',
                 lineHeight: 40,
                 color: '#000000'
              },
           }
        },
     }],
     legend: {
        width: "240",
        x: 'center',
        bottom: legendBottom,
        data: lengthList,
        itemHeight: 10,
        itemWidth: 10,
        textStyle: {
           color: "#000000",
           fontSize: 14,
           lineHeight: 14,
        },
        tooltip: {
           show: true,
           formatter: function (params) {
              var name = params.name;
              var i = nameList.indexOf(name);
              var value = dataList[i];
              var color = colorList[i];
              var marker = `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:${color};"></span>`;
              return name + ' <br/> ' + marker + value + ' <br/> ' + valList[i] + "%";
           },
        }
     },
     angleAxis: {
        max: 100,
        clockwise: true,
        show: false
     },
     radiusAxis: {
        type: 'category',
        show: true,
        axisLabel: {
           show: false,
        },
        axisLine: {
           show: false,
        },
        axisTick: {
           show: false
        },
     },
     polar: {
        center: center,
        radius: radius1,
     },
     series: seriesList
  };

  return option
}

export function ChartData55() {
  const option = {
    backgroundColor: '#0a2b71', //背景颜色
    title: {
       text: '虚线', //表头
       x: 'center',
       top: "20",
       textStyle: {
          //文字颜色
          color: '#ffff',
          //字体风格
          fontStyle: 'normal',
          //字体粗细 
          fontWeight: 'bold',
          //字体系列
          fontFamily: 'sans-serif',
          //字体大小
          fontSize: 18
 
       },
    },
    tooltip: {
       trigger: 'axis',
       //  transitionDuration: 0,
       //   confine: true,
       //   bordeRadius: 51,
       borderWidth: 1, //提示框边框的大小
       borderColor: '#333', //提示框边框的颜色
       backgroundColor: 'rgba(255,255,255,0.9)', //提示框的背景颜色（0.9为透明度）
       textStyle: {
          fontSize: 12, //提示框的字体大小
          color: '#333', //提示框里的字体颜色
          aligin: 'center',
 
       },
    },
    color: ['red', '#12C3C3', '#FBCD14'], //颜色配置
    legend: {
       data: ['叠翠园', '北岳北','御东学府'],
       // right:'30',//标签头 居右距离
       bottom: '70',
       // top:'20', //标签头 居上距离
       textStyle: {
          // color: [ '#','#'], // 标签头 提示文字的颜色
          color: '#ffff'
       },
       icon: "circle", //icon 长方形 circle 圆形 arrow箭头型 diamond菱形
       // triangle三角形  emptyDiamond 空心菱形
       //emptyCircle 空心圆型 emptyRectangle 空心长方形 emptyTriangle 空心三角形
    },
    // dataZoom: [{
    //     type: 'slider',
    //     realtime: true,
    //     //拖拉
    //     handleSize: '100%', //滑动条两侧的大小
    //     start: 0, //开始位置
    //     end: 50, //结束位置
    //     bottom: 25, //居下的距离
    //     textStyle: {
    //         color: '#1bb4f6' // 滑动条的文字颜色
    //     },
    // }],
    dataZoom: [
       {
          type: "slider",
 
          show: true,
          zoomLock: true,
          // orient: "vertical",
          // filterMode: "none",
          // right: "2%",
          start: 100,
          end: 20,
          bottom: 25, //居下的距离
          // width: 10,
          height: 10,
          textStyle: {
             color: "#FFF",
             fontSize: 9,
          },
          fillerColor: "rgba(21, 220, 247, 1)",
          brushSelect: false,
          handleIcon:
             "path://M30.9,53.2C16.8,53.2,5.3,41.7,5.3,27.6S16.8,2,30.9,2C45,2,56.4,13.5,56.4,27.6S45,53.2,30.9,53.2z M30.9,3.5M36.9,35.8h-1.3z M27.8,35.8 h-1.3H27L27.8,35.8L27.8,35.8z", // 画一个圆形
          handleSize: "100%",
          handleStyle: {
             color: "rgba(21, 220, 247, 1)",
             borderWidth: 0,
          },
          backgroundColor: "rgba(38, 108, 252, 0.1)", //两边未选中的滑动条区域的颜色
 
          borderColor: "transparent",
          filterMode: "filter",
       },
    ],
    // dataZoom: [{
    //     type: 'slider', // slider表示有滑动块的，inside表示内置的
    //     show: true, // 是否显示dataZoom，在完全自定义的时候需要用到
    //     xAxisIndex: [0], // dataZoom控制的图标的是哪条x轴，因为会有多轴一图，可以控制多轴
    //     yAxisIndex: [1,0], // dataZoom控制的图标的是哪条y轴，因为会有多轴一图，可以控制多轴
    //     start: 10, // 和startValue不要弄混，这里是百分比
    //     end: 50, // 和endValue不要弄混，这里是百分比
    //     startValue: 0, // 滑块左端对应的x值
    //     endValue: 500, // 滑块右端对应的x值
    //     height: 10, // dataZoom整体高度
    //     filterMode: 'none', // 过滤模式，有filter, weakFilter, empty, none四个值，过滤会把整个数据段隐藏，而none则只是移动坐标轴
    //     left: 0,
    //     right: 0,
    //     top: 0,
    //     bottom: 25, // dataZoom相对图标的位置
    //     animation:true, // 设置动画效果
    //     throttle: 100, // 设置视图刷新的频率，ms
    //     showDetail: false,
    //     showDataShadow: false,
    //     borderColor: '#0000', // dataZoom边框颜色
    //     fillerColor: '#ffffff4c', //  滑块颜色
    //     handleSize: '0%',
    //     brushSelect: false // 是否允许拖动滑块长度改变视图范围，不允许就是固定范围
    //   }],
 
    grid: {
       left: '3%', //整个曲线居左的距离
       right: '4%', //整个曲线居右左的距离
       bottom: '20%', //整个曲线居下左的距离
       height: '70%', //整个曲线的高
       containLabel: true
    },
    toolbox: {
       show: true,
       feature: {
          // dataZoom: {},
          dataView: {
             readOnly: true
          },
          magicType: {
             type: ['line', 'bar', 'pie']
          },
          restore: {},
          textStyle: {
             color: '#1bb4f6', // 左上角切换的颜色
          },
          // saveAsImage: {}
       }
    },
    optionToContent: function (opt) {
       let axisData = opt.xAxis[0].data; //坐标数据
       let series = opt.series; //折线图数据
       let tdHeads = '<td  style="padding: 0 10px;">时间</td>'; //表头
       let tdBodys = ''; //数据
       series.forEach(function (item) {
          //组装表头
          tdHeads += `<td style="padding: 0 10px">${item.name}</td>`;
       });
       let table = `<table border="1" style="margin-left:50px;border-collapse:collapse;font-size:24px;text-align:center;"><tbody><tr>${tdHeads} </tr>`;
       for (let i = 0, l = axisData.length; i < l; i++) {
          for (let j = 0; j < series.length; j++) {
             //组装表数据
             tdBodys += `<td>${series[j].data[i]}</td>`;
          }
          table += `<tr><td style="padding: 0 10px">${axisData[i]}</td>${tdBodys}</tr>`;
          tdBodys = '';
       }
       table += '</tbody></table>';
       return table;
    },
    xAxis: {
       type: 'category',
       boundaryGap: false,
       data: ['10月1日', '10月2日', '10月3日', '10月4日', '10月5日', '10月6日', '10月7日'],
 
       axisLine: {
          lineStyle: {
             color: '#BA55D3', //设置X轴的颜色
             width: 1.5, //设置X轴的粗细
          }
       },
       axisLabel: {
          show: true,
          textStyle: {
             color: '#00FF00' //Y轴的数据字体颜色
          },
       },
 
    },
    yAxis: [{
       name: "亿元", //左侧单位
       nameTextStyle: {
          color: "#ebf8ac" //左侧单位文字
       },
       type: 'value',
       axisLine: {
          lineStyle: {
             color: '#FFFF', //设置Y轴的颜色
             width: 1.5, //设置Y轴的粗细
          }
       },
       axisLabel: {
          show: true,
          //formatter: "{value} %", //左侧单位添加后缀
          textStyle: {
 
             color: '#00FF00' //Y轴的数据字体颜色
          },
       },
       splitLine: {
          show: true,
          lineStyle: {
             color: '#FFC125' //网格线的颜色
          }
       }
    },
    {
       type: "value",
       name: "同比",
       nameTextStyle: {
          color: "red"
       },
       position: "right",
       splitLine: {
          show: false
       },
       axisTick: {
          show: false
       },
       axisLine: {
          lineStyle: {
             color: 'red', //设置Y轴的颜色
             width: 1.5, //设置Y轴的粗细
          }
       },
       axisLabel: {
          show: true,
          formatter: "{value} %", //右侧Y轴文字显示
          textStyle: {
             color: "red"
          }
       }
    },
    ],
    series: [{
       name: '叠翠园',
       type: 'line',
       smooth: true, //圆滑的曲线
       data: [180, 92, 81, 174, 210, 280, 210],
       symbolSize: 1,
       //  color: '#BA55D3',
       yAxisIndex: 1, //下标以右侧同比数据参考
       lineStyle: {
          width: 3 //改变线条的粗细
       },
       itemStyle: {
          normal: {
             lineStyle: {
                width: 2,
                type: 'dotted'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
             }
          }
       },
       label: {
          show: true, //是否显示
          // position: 'top', //位置
          // distance: 15, //高度
          // 			color: '#DB5E6A', //颜色
          // fontWeight: 'bolder', //加粗
          // fontSize: 20, //字体大小
       },
 
    },
    {
       name: '北岳北',
       type: 'line',
       smooth: true,
       data: [340, 382, 391, 334, 390, 390, 410],
       itemStyle: {
          normal: {
             lineStyle: {
                width: 2,
                type: 'dashed'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
             }
          }
       },
       // symbolSize: 1,
       //  label: {
       //             show: true, //是否显示
       //             position: 'top', //位置
       //             distance: 15, //高度
       //             // 			color: '#DB5E6A', //颜色
       //             fontWeight: 'bolder', //加粗
       //             // fontSize: 20, //字体大小
       //         },
    },
      {
       name: '御东学府',
       type: 'line',
       smooth: true,
       data: [140, 212, 241, 234, 150, 160, 250],
       // itemStyle: {
       //    normal: {
       //       lineStyle: {
       //          width: 2,
       //          type: 'dashed'  //'dotted'点型虚线 'solid'实线 'dashed'线性虚线
       //       }
       //    }
       // },
       // symbolSize: 1,
       //  label: {
       //             show: true, //是否显示
       //             position: 'top', //位置
       //             distance: 15, //高度
       //             // 			color: '#DB5E6A', //颜色
       //             fontWeight: 'bolder', //加粗
       //             // fontSize: 20, //字体大小
       //         },
    }
    ]
 };
 return option
}

export function ChartData57() {
  
 // 获取颜色值
const getItemColor = (value, alarm, high) => {
  if (value < 2) {
    return {
      color: '#ccf2df',
      borderColor: '#01BD5D',
      borderWidth: '2'
    }
  } else if (value < 4) {
    return {
      color: '#FFDCB8',
      borderColor: '#FEA84E',
      borderWidth: '2'
    }
  } else {
    return {
      color: '#FCB5B6',
      borderColor: '#F84548',
      borderWidth: '2'
    }
  }
}
 
 
 const echartsData = {
    max: 1,
    low: 0.5,
    high: 0.7,
    dates: ['2020-10-10', '2021-12-02', '2022-03-09', '2023-10-12', '2024-01-03', '2025-09-09'],
    values: [0.12, 0.49, 0.52, 0.69, 0.71, 0.9]
  }

  let max = echartsData.max // 最大值
  let low = echartsData.low // 第一级的分隔值
  let high = echartsData.high // 第二级的分隔值
  let xdata = echartsData.dates
  let list = echartsData.values
  let ydata = []


  //  数据映射，将0-1的数据映射在 0-6之间
  list.forEach(item => {
    // 举例： max=1 low=0.5 high=0.7
    // 将 0-0.5 的风险映射到0-2
    // 将 0.5-0.7 的风险映射到2-4
    // 将 0.7-1 的风险映射到4-6
    if (item > high) {
      item = (2 * (item - high) / (max - high)) + 4
    } else if (item > low) {
      item = (2 * (item - low) / (high - low)) + 2
    } else {
      item = (2 * item) / low
    }

    let obj = {
      value: item,
      symbol: 'circle',
      symbolSize: 8,
      itemStyle: getItemColor(item, low, high),
    }
    ydata.push(obj)
  })

   const option = {
    dataZoom: {
      type: 'inside',
      start: 0,
      // maxValueSpan: 4,
    },
    grid: {
      left: '8%',
      right: '8%',
      bottom: '25%',
      top: '10%',
    },
    xAxis: [
      {
        type: 'category',
        boundaryGap: true,
        splitLine: { show: false },
        splitArea: { show: false },
        axisLine: { show: false },
        axisLabel: {
          rotate: 45,
          interval: 0,
          textStyle: {
            color: '#333',
            fontSize: '12',
            fontWeight: 'normal',
          },
        },
        axisTick: {
          show: false,
        },
        data: xdata,
      },
    ],
    yAxis: [{
      type: 'value',
      max: 6,
      min: 0,
      splitNumber: 6,
      splitLine: {
        show: false
      },
      splitArea: {
        show: false
      },
      axisLine: {
        show: false
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        rotate: 90,
        interval: 0,
        // 使用函数模板，函数参数分别为刻度数值（类目），刻度的索引
        formatter: function (value) {
          if (value === 1) {
            return '第一阶段'
          } else if (value === 3) {
            return '第二阶段'
          } else if (value === 5) {
            return '第三阶段'
          }
          return '';
        },
        textStyle: {
          color: '#333',
          fontSize: '16',
          fontWeight: 'normal',
        },
      },
    }],
    series: [
      {
        name: '风险',
        type: 'line',
        showAllSymbol: true,
        symbol: 'circle',
        symbolSize: 16,
        lineStyle: {
          width: '2',
          type: 'solid',
          color: '#9cb8fa',
        },
        markArea: {
          // 标记区域
          data: [
            [
              {
                yAxis: '4',
                itemStyle: {
                  color: 'rgba(255, 63, 63, 0.2)',
                },
              },
              {
                yAxis: '6',
              },
            ],
            [
              {
                yAxis: '2',
                itemStyle: {
                  color: 'rgba(255, 138, 0, 0.2)',
                },
              },
              {
                yAxis: '4',
              },
            ],
            [
              {
                yAxis: '0',
                itemStyle: {
                  color: 'rgba(1, 189, 93, 0.2)',
                },
              },
              {
                yAxis: '2',
              },
            ],
          ],
        },
        data: ydata,
      },
    ],
  }
  return option
}

export function ChartData58() {
  // 获取颜色值
const getItemColor = (value, alarm, high) => {
  if (value < alarm) {
     return {
        color: '#A2C7FF',
        borderColor: '#1773FF',
        borderWidth: '2'
     }
  } else if (value < high) {
     return {
        color: '#FFDCB8',
        borderColor: '#FEA84E',
        borderWidth: '2'
     }
  } else {
     return {
        color: '#FCB5B6',
        borderColor: '#F84548',
        borderWidth: '2'
     }
  }
}

const getLabelColor = (value, alarm, high) => {
  if (value < alarm) {
     return '#1773FF'
  } else if (value < high) {
     return '#FEA84E'
  } else {
     return '#F84548'
  }
}

const echartsData = {
  alarm: 0.5,
  high: 0.7,
  dates: ['2020', '2021', '2022', '2023', '2024'],
  values: [0.12, 0.49, 0.52, 0.69, 0.71]
}

let alarm = echartsData.alarm // 持续关注的起始值
let high = echartsData.high // 重点关注的起始值
let xdata = echartsData.dates
let list = echartsData.values
let ydata = []
list.forEach(item => {
  let obj = {
     value: item,
     symbol: 'circle',
     itemStyle: getItemColor(item, alarm, high),
     label: {
        formatter: `${item}`,
        borderColor: getLabelColor(item, alarm, high),
     },
  }
  ydata.push(obj)
})
let lastObj = {
  value: list[list.length - 1],
  symbol: 'circle',
  symbolSize: 1,
  itemStyle: {
     color: '#fff',
  },
  label: {
     show: true,
     distance: -5,
     formatter: () => {
        return `?`;
     },
     color: '#FCB5B6',
     fontSize: 18,
     lineHeight: 18,
     borderColor: '#FCB5B6',
     borderWidth: 2,
     padding:[4,7,0,7],
     shadowColor: 'none',
     borderRadius: 12,
     shadowBlur: 0,
     align: 'center',
  },
}
ydata.push(lastObj)
xdata.push("?")

console.log("数据", ydata)

const option = {
  dataZoom: {
     type: 'inside',
     start: 0,
     maxValueSpan: 6,
  },
  grid: {
     left: 30,
     right: 15,
     bottom: 70,
     top: 30,
  },
  xAxis: [{
     type: 'category',
     splitLine: {
        show: true,
        lineStyle: {
           type: 'dashed',
           color: '#eee'
        }
     },
     splitArea: {
        show: false
     },
     axisLine: {
        show: true,
        lineStyle: {
           type: 'dashed',
           color: '#eee'
        }
     },
     axisLabel: {
        rotate: 45,
        interval: 0,
        textStyle: {
           color: '#333',
           fontSize: '12',
           fontWeight: 'normal',
        },
     },
     axisTick: {
        show: false,
     },
     boundaryGap: true,
     data: xdata,
  },],
  yAxis: [{
     type: 'value',
     interval: 5,
     minInterval: 0.5,
     splitLine: {
        show: false
     },
     splitArea: {
        show: false
     },
     axisLine: {
        show: false
     },
     axisTick: {
        show: false,
     },
  }],
  visualMap: {
     type: "piecewise",
     show: false,
     pieces: [{
        gte: 0,
        lte: 5,
        color: '#1779F4',
        label: '未见异常'
     },
     {
        gt: 5,
        lte: 30,
        color: '#ECA814',
        label: '未见异常'
     },
     {
        gt: 30,
        lte: 50,
        color: '#FF5A5A',
        label: '未见异常'
     },
     ],
     outOfRange: { // 超出范围
        color: '#fff',
     },
  },
  series: [{
     name: '风险',
     type: 'line',
     showAllSymbol: true,
     symbolSize: 10,
     lineStyle: {
        width: '1',
        type: 'dashed',
        color: '#aaa',
     },
     label: {
        show: true,
        distance: 5,
        fontSize: 12,
        padding: [2, 4, 0, 4],
        backgroundColor: '#fff',
        color: '#000',
        borderRadius: 2,
        borderWidth: 1,
        shadowColor: 'none',
        shadowBlur: 0,
        align: 'center',
     },
     data: ydata,
  }],
}
return option
}

export function ChartData59() {
  // let myChart5 = echarts.init(document.getElementById("chart5")); // 拿到一个实例
let myData5 = [
  "11-14",
  "11-15",
  "11-16",
  "11-17",
  "11-18",
  "11-19",
  "11-20",
];
let fwrs = [110, 120, 300, 200, 100, 400, 240];
let xdrs = [150, 160, 120, 130, 140, 320, 200];
let zhl = [60, 70, 45, 80, 45, 60, 55];
const option = {
  backgroundColor: "#001734",
  tooltip: {
     trigger: "axis",
     axisPointer: {
        lineStyle: {
           color: {
              type: "linear",
              x: 0,
              y: 0,
              x2: 0,
              y2: 1,
              colorStops: [
                 {
                    offset: 0,
                    color: "rgba(0, 255, 233,0)",
                 },
                 {
                    offset: 0.5,
                    color: "rgba(255, 255, 255,1)",
                 },
                 {
                    offset: 1,
                    color: "rgba(0, 255, 233,0)",
                 },
              ],
              global: false,
           },
        },
     },
     textStyle: {
        color: "#fff",
     },
     backgroundColor: "rgba(0, 58, 99, 0.8)", //设置背景颜色
     borderColor: "rgba(0, 58, 99, 0.8)",
     confine: true,
     formatter: `{b}<br>{a}：{c}千人<br>{a1}：{c1}千人<br>{a2}：{c2}%`,
  },
  legend: {
     itemWidth: 12,
     itemHeight: 8,
     itemGap: 20,
     right: "2%",
     top: "3%",
     x: "center",
     textStyle: {
        fontSize: 14,
        color: "#fff",
     },
     data: ["访问人数", "下单人数", "转化率"],
     selectedMode: false,
  },
  grid: {
     top: "16%",
     left: "2%",
     right: "2%",
     bottom: "2%",
     containLabel: true,
  },
  xAxis: {
     type: "category",
     data: myData5,
     axisLabel: {
        color: "#A4A7AA",
        interval: 0,
        fontSize: 12,
     },
     axisLine: {
        show: true,
        lineStyle: {
           color: "rgba(127, 214, 255, .4)",
        },
     },
     splitLine: {
        show: false,
     },
     axisTick: {
        show: false,
     },
  },
  yAxis: [
     {
        type: "value",
        name: "人数 / 千人",
        splitNumber: 5,
        nameTextStyle: {
           color: "#fff",
           fontSize: 12,
           align: "center",
           padding: [0, 20, 5, 0],
        },
        axisLabel: {
           formatter: "{value}",
           color: "rgba(95, 187, 235, 1)",
           textStyle: {
              fontSize: 14,
              color: "#fff",
              lineHeight: 16,
           },
        },
        axisTick: {
           show: false,
        },
        splitLine: {
           show: true,
           lineStyle: {
              color: "rgba(28, 130, 197, .3)",
              type: "dashed",
           },
        },
     },
     {
        name: "转化率 / %",
        splitNumber: 5,
        max: 100,
        type: "value",
        nameTextStyle: {
           color: "#fff",
           fontSize: 12,
           align: "center",
           padding: [0, 0, 5, 0],
        },
        axisLabel: {
           show: true,
           fontSize: 12,
           color: "#fff",
        },
        axisLine: {
           show: false,
        },
        axisTick: {
           show: false,
        },
        splitLine: {
           show: false,
        },
     },
  ],
  series: [
     {
        name: "访问人数",
        type: "bar",
        data: fwrs,
        barWidth: "15px",
        barGap: "50%",
        itemStyle: {
           normal: {
              borderColor: "#3681FF",
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                    offset: 0,
                    color: "rgba(15, 51, 82, 1)",
                 },

                 {
                    offset: 1,
                    color: "rgba(0, 168, 255, 1)",
                 },
              ]),
           },
        },
        label: {
           show: false,
           position: "top",
           fontSize: 12,
           color: "#F5F5F5",
           offset: [0, -5],
           formatter: "{c}",
        },
     },
     {
        name: "下单人数",
        type: "bar",
        data: xdrs,
        barWidth: "15px",
        barGap: "50%",
        itemStyle: {
           normal: {
              borderColor: "rgba(54, 234, 255, 1)",
              color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                 {
                    offset: 0,
                    color: "rgba(15, 51, 82, 1)",
                 },

                 {
                    offset: 1,
                    color: "rgba(21, 219, 203, 1)",
                 },
              ]),
           },
        },
        label: {
           show: false,
           position: "top",
           fontSize: 12,
           color: "#F5F5F5",
           offset: [0, -5],
           formatter: "{c}",
        },
     },
     {
        name: "转化率",
        type: "line",
        yAxisIndex: 1,
        showSymbol: true,
        symbolSize: 8,
        smooth: true,
        symbol: "circle",
        lineStyle: {
           normal: {
              color: "#02D6B0",
           },
        },
        itemStyle: {
           color: "#02D6B0",
           borderColor: "#fff",
           borderWidth: 1,
        },
        areaStyle: {
           normal: {
              color: new echarts.graphic.LinearGradient(
                 0,
                 0,
                 0,
                 1,
                 [
                    {
                       offset: 0,
                       color: "rgba(0, 255, 246, 0.5)",
                    },
                    {
                       offset: 1,
                       color: "rgba(0, 255, 246, 0)",
                    },
                 ],
                 false
              ),
           },
        },
        data: zhl, // 折线图的数据
     },
  ],
};
     // window.addEventListener("resize", function () {
     //   myChart5.resize();
     // });
     // if (option5 && typeof option5 === "object") {
     //   myChart5.setOption(option5, true);
     //   var i5 = 0; //播放所在下标
     //   var mTime = setInterval(function () {
     //     myChart5.dispatchAction({
     //       type: "showTip",
     //       seriesIndex: 0,
     //       dataIndex: i5,
     //     });
     //     i5++;
     //     if (i5 >= myData5.length) {
     //       //console.log('data4', fxdata.length)
     //       i5 = 0;
     //       //console.log(fxdata)
     //     }
     //   }, 3400);
     // }
     return option
}

export function ChartData60() {
  const payload = {
    id: '',
    data: {
       title: ['新增用户数：人', '增长率：%'],
       x: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
       data1: [20, 80, 100, 40, 34, 90, 60, 20, 80, 100, 40, 34],
       data2: [123, 455, 233, 455, 223, 644, 234, 233, 654, 222, 654, 234]
    }
 };
 
 const x = payload.data.x || [];
 const data1 = payload.data.data1 || [];
 const data2 = payload.data.data2 || [];
 const title = payload.data.title || [];
 const option = {
    backgroundColor: '#30333C',
    grid: {
       left: 15,
       right: 0,
       bottom: 20,
       top: 90,
       // 是否包含文本
       containLabel: true
    },
    xAxis: {
       data: x,
       axisTick: {
          show: false, // 隐藏X轴刻度
          lineStyle: {
             color: '#007eff4d'
          }
       },
       axisLine: {
          show: true,
          lineStyle: {
             color: '#007eff4d'
          }
       },
       splitLine: {
          show: false,
          lineStyle: {
             color: '#007eff4d'
          }
       },
       axisLabel: {
          show: true,
          textStyle: {
             color: '#ffffff' // 更改坐标轴文字颜色
          },
          fontSize: 14
       }
    },
    yAxis: [
       {
          name: title[0],
          nameTextStyle: {
             fontSize: 14,
             padding: [0, 0, 34, 15],
             color: '#ffffffe6'
          },
          axisLine: {
             show: true,
             lineStyle: {
             color: '#007eff4d'
             }
          },
          axisTick: {
             show: false,
             lineStyle: {
             color: '#007eff4d'
             }
          },
          axisLabel: {
             show: true,
             textStyle: {
             color: '#fff' // Y轴的数据字体颜色
             },
             fontSize: 14
          },
          splitLine: {
             show: true, // 隐藏X轴刻度
             lineStyle: {
             color: '#007eff4d'
             }
          }
       },
       {
          name: title[1],
          nameTextStyle: {
             fontSize: 14,
             padding: [0, 15, 34, 0],
             color: '#ffffffe6'
          },
          axisLine: {
             show: true,
             lineStyle: {
             color: '#007eff4d'
             }
          },
          axisTick: {
             show: false,
             lineStyle: {
             color: '#007eff4d'
             }
          },
          axisLabel: {
             show: true,
             textStyle: {
             color: '#fff' // Y轴的数据字体颜色
             },
             fontSize: 14
          },
          splitLine: {
             show: true, // 隐藏X轴刻度
             lineStyle: {
             color: '#007eff4d'
             }
          }
       }
    ],
    series: [
       {
          data: data1,
          type: 'bar',
          barWidth: 10,
          itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             {
                offset: 0,
                color: '#5cc4eb'
             },
             {
                offset: 0.8,
                color: '#21658c'
             }
          ])
          }
       }, {
          name: '圆',
          type: 'scatter',
          data: data1,
          label: 'none',
          symbolSize: 54,
          symbol: 'image://',
          itemStyle: {
          borderColor: 'rgba(230, 240, 255, 0.2)',
          borderWidth: 14,
          color: '#61A5FF',
          opacity: 1
          },
          z: 2
       },
       {
          'type': 'line',
          'data': data2,
          'yAxisIndex': 1,
          smooth: true,
          lineStyle: {
          color: '#FFA155',
          width: 3
          },
          showSymbol: false,
          areaStyle: {
          opacity: 0.8,
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
             { offset: 0, color: '#FFA155' },
             { offset: 0.8, color: '#FFA15500' }
          ])
          }
       }
    ]
 };
return option 
}